.gmage-editor-tools_type-brush {
    .gmage-editor-range-picker {
        width: 90px;
    }

    .gmage-editor-toolbar-btn {
        padding: 0;
    }

    .gmage-editor-color-picker {
        margin-left: 0;
    }

    .gmage-editor-tools__color-preset {
        width: 30px;
        height: 22px;
        cursor: pointer;
        ~ .gmage-editor-tools__color-preset {
            margin-left: 6px;
        }

        &_active {
            &::before {
                content: "";
                display: block;
                width: 30px;
                height: 22px;
                .icon(tick, #fff);
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }

    .gmage-editor-tools__brush-pattern{
        position: relative;
        width: 34px;
        height: 40px;
        cursor: pointer;

        & ~ .gmage-editor-tools__brush-pattern {
            margin-left: 10px;
        }

        &_active {
            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 18px;
                background: #0D69FF;
                bottom: 0;
                .icon(tick, #fff);
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }

    .tool-brush-pattern(@name, @fill: #000) {
        .brush-pattern-@{name} {
            .image(@name);
        }
    }

    .tool-brush-pattern(preview-1);
    .tool-brush-pattern(preview-2);
    .tool-brush-pattern(preview-3);
    .tool-brush-pattern(preview-4);
    .tool-brush-pattern(preview-5);
}

.gmage-editor-tools__color-picker_active {
    &::before {
        position: absolute;
        content: "";
        display: block;
        width: 30px;
        height: 22px;
        .icon(tick, #fff);
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 99;
        top: 3px;
        pointer-events: none;
    }
    &.is-light {
        .icon-color  {
            box-shadow: #ccc 0 0 0 1px;
        }
        &::before {
            .icon(tick, #000);
        }
    }
}