@import "inc/bootstrap";

#item-editor-interaction-bar {

    img.interaction-sidebar-icon {
        width: 28px;
        height: 28px;
        display: block;
        margin: 5px auto 8px;
        opacity: 0.8;
    }

    .tool-group {
        .panel.sub-group {
            position: relative;
            padding-top: 0 !important;
            padding-bottom: 4px;
            .tool-list {
                position: relative;
                z-index: 4;
            }
            .sub-group-cover {
                position: absolute;
                left: 0;
                top: -7px;
                width: 96%;
                height: 100%;
                background-color: rgba(mix(#fff, $grey, 85%), 0.3) !important;
                z-index: 2;
                border: 1px $websiteBorder solid;
                @include border-radius(3);
                margin: 2%;
                cursor: no-drop !important;
                &.blocking {
                    z-index: 10;
                }
            }

            .sub-group-cover:after, .sub-group-cover:before {
                bottom: 100%;
                left: 35%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            .sub-group-cover:after {
                border-color: transparent;
                border-bottom-color: mix(#fff, $grey, 85%);
                border-width: 8px;
                margin-left: -8px;
            }

            .sub-group-cover:before {
                border-color: transparent;
                border-bottom-color: $websiteBorder;
                border-width: 9px;
                margin-left: -9px;
            }
        }
    }

    .tool-list {
        margin-top: -3px;
        @extend %clearfix;
        li {
            width: 50%;
            margin: 0;
            float: left;
            padding: 9px 3px;
            @include font-size(12);
            border: 1px dotted transparent;
            cursor: move;
            text-align: center;
            &:hover {
                background: white(.6);
                border: 1px dotted #aaa;
            }
            span {
                display: block;
                margin: 5px auto 8px;
                @include font-size(28);
                opacity: .9;
            }
            img.icon {
               max-height: 28px;
            }
            &.disabled {
                cursor: default;
                background-color: #eee !important;
                &:hover {
                    background: white(.6);
                    border: 1px dotted transparent;
                }
            }
            &.dev {
                background: whiten($info, .95);
                color: $info;
                &:hover {
                    background: white(.6);
                }
            }
        }
    }
}