// minicolors shim
.minicolors{
    &, * {
        box-sizing: content-box;
    }
}

// editor-color-picker
.editor-color-picker{
    display: inline-block;
    vertical-align: top;
    position: relative;

    .editor-popup{
        background-color: #F9F9F9;
        margin-left: -5px;
        margin-top: 18px;
    }
}
// editor-color-picker
.editor-color-wrapper{

    margin: 0 -4px;

    .editor-color-sider{
        display: inline-block;
        vertical-align: top;
    }

    .color-kit{
        margin-top: 8px;
        color: #666;

        span{
            margin-bottom: 3px;
            display: inline-block;
        }
    }

    .color-history{
        float: left;
        width:160px;
    }

    .color-switch{
        float: right;
        width: 24px;
        height: 40px;

        .switch-icon{
            margin-left: 3px;
            display: block;
            cursor: pointer;

            width: 20px;
            height: 20px;

            border-radius: 2px;
            overflow: hidden;
        }

        .switch-icon.icon-hue,
        .switch-icon.icon-block{
            b{
                .icon(color-switch-block);
                width: 20px;
                height: 20px;
                background-size: 100%;
            }
        }

        .switch-icon.icon-hue b{
            background-image: url(../assets/slice/icon-color-switch-hue@2x.png);
        }
    }

    .editor-color-inp{
        background: #FFF;
        border: 1px solid #CCC;
        border-radius: 2px;
        margin-top: -28px;
        padding: 2px 3px;
        height: 26px;
        width: 100px;
        position: absolute;
        text-align: center;
        outline: 0;
    }

    .minicolors{
        vertical-align: top;
    }
    .minicolors-panel{
        background: none;
        border: 0;
        vertical-align: top;
    }

    .minicolors-grid-inner{
        height: 100%;
        width: 100%;
    }
}

.toolbar-north {
    .editor-color-picker{
        .editor-popup{
            margin-bottom: 18px;
            bottom: 100%;

            &:before{
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
                margin-top: 5px;
                bottom: 0;
            }

        }
    }
}