@import "sprite";
@import "sprite-2x";
@import "sprite-pos";

.foreColor-trumbowyg-dropdown,
.backColor-trumbowyg-dropdown {
    width: 264px;
    padding: 7px 5px;

    button {
        display: block;
        position: relative;
        float: left;
        text-indent: -9999px;
        height: 20px;
        width: 20px;
        border: 1px solid #333;
        padding: 0;
        margin: 2px;

        &:hover,
        &:focus {
            &::after {
                content: " ";
                display: block;
                height: 27px;
                width: 27px;
                background: inherit;
                position: absolute;
                top: -5px;
                left: -5px;
                border: 1px solid #FFF;
                box-shadow: #000 0 0 2px;
                z-index: 10;
            }
        }
    }
}



/*
 * Buttons icons
 */
.trumbowyg-button-pane li button {
    &.trumbowyg-foreColor-button,
    &.trumbowyg-backColor-button {
        background-image: url($icons);
    }

    &.trumbowyg-foreColor-button { @include sprite-pos($forecolor); }
    &.trumbowyg-backColor-button { @include sprite-pos($backcolor); }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){ 
    .trumbowyg-button-pane li button {
        &.trumbowyg-foreColor-button,
        &.trumbowyg-backColor-button {
            background-image: url($icons-2x) !important;
        }

        &.trumbowyg-foreColor-button { @include sprite-pos($forecolor-2x, true); }
        &.trumbowyg-backColor-button { @include sprite-pos($backcolor-2x, true); }
    }
}