.w_color_picker{
    --width: 26px;
    --height: unset;
    --box_shadow: 0 0 2px 0 #000;
    --padding: 4px 2px;

    width: var(--width);
    height: var(--height);
    padding: var(--padding);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f2f2f2;

    &.modal{
        position: absolute;
        box-shadow: var(--box_shadow);
        display: none;
        &.open{display: block;}
        &.open.flex{display: flex;}
    }
    &.flex{
        --gap: 10px;
        --width: 240px;
        --height: 26px;
        --padding: 2px 4px;

        .color{margin-bottom: 0;}

        top: var(--top, 25px);
        left: var(--left, calc(50% - 120px));
    }

    .color{
        width: 20px;
        height: 20px;
        padding: 5px 3px;
        margin-bottom: 10px;
        border-radius: 50%;
        cursor: pointer;
        &:last-of-type{margin-bottom: 0;}

        img.tick{
            filter: var(--filter, var(--white_icon_filter));
            width: 13px;
            opacity: 0;
            display: block;
            transition: 0.3s ease all;
        }
        @media(hover: hover){
            &:hover{
                border: 1px solid #c5c5c5;
            }
        }
        &.active{
            border: 1px solid #000;
            img{opacity: 1;}
        }
        &[data-hex="#000000"]{
            background: #000000;
        }
        &[data-hex="#ff0000"]{
            background: #ff0000;
        }
        &[data-hex="#ffa500"]{
            background: #ffa500;
        }
        &[data-hex="#ffff00"]{
            background: #ffff00;
            --filter: none;
        }
        &[data-hex="#00ff00"]{
            background: #00ff00;
            --filter: none;
        }
        &[data-hex="#e0ffff"]{
            background: #e0ffff;
            --filter: none;
        }
        &[data-hex="#0000ff"]{
            background: #0000ff;
        }
        &[data-hex="#8000ff"]{
            background: #8000ff;
        }
    }
}