@use "../common/utils" as *;
@use "../common/mixins" as *;

.filter-sort-by {
    display: flex;
    gap: calc-rem(10px);
    align-items: center;

    .sort-by-label {
        font-size: calc-rem(14px);
    }

    select {
        height: calc-rem(45px);
        padding-inline: calc-rem(17px) calc-rem(40px);
        min-width: calc-rem(130px);
        border: calc-rem(1px) solid rgba(var(--color-border));
        border-radius: calc-rem(5px);
        color: rgba(var(--color-secondary));
        appearance: none;
        background: url("../images/icons/icon-chevron.svg") no-repeat calc(100% - 1rem) center;
        font-size: calc-rem(14px);
        font-variation-settings: var(--font-variation-settings-medium);

        &:focus {
            outline-color: rgba(var(--color-secondary));
        }
    }
}

