.w_select{
    position: relative;
    width: fit-content;

    font-size: inherit;

    font-size: var(--select_font_size, 14px);
    color: var(--select_text_color, #5d5d5d);
    .select_header{
        display: grid;
        grid-template-columns: calc(100% - 18px) 8px;
        align-items: center;
        gap: 7px;
        cursor: pointer;

        .select_value{

            img{
                height: 15px;
                display: block;
            }
        }

        .caret{
            width: 8px;
            display: block;

            filter: var(--select_caret_filter, var(--grey_icon_filter));
        }
    }

    .select_body{
        display: none;
        position: absolute;
        right: 0;
        top: 20px;

        background: var(--select_bg, #fff);
        border:var(--select_border, 1px solid #e0e0e0);

        .select_option{
            padding: 5px 7px;
            cursor: pointer;
            display: block;
            color: inherit;
            text-decoration: none;
            &:has(img){
                display: grid;
                grid-template-columns: 15px calc(100% - 20px);
                align-items: center;
                gap: 5px;
            }

            img{
                width: 15px;
                display: block;
            }

            &:hover, &.active{
                background: #f2f2f2;
            }
        }
    }

    &.open{
        .select_body{display: block;}
        .select_header .caret{rotate: 180deg;}
    }
}