// Arrow styles taken from https://css-tricks.com/styling-a-select-like-its-2019/ thank you!

select {
    appearance: none;

    --btn-background: var(--primary);
    --btn-highlight: var(--primary-hover);

    background-color: var(--background-tertiary);
    border: 4px solid var(--background-tertiary);
    border-radius: 8px;
    font-weight: 400;

    padding: 14px 64px 14px 18px;

    display: inline-block;

    color: var(--text);

    cursor: pointer;

    transition: border-color 0.2s ease-in-out;

    /* Arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;

    /* Support for rtl text, explicit support for Arabic and Hebrew */
    *[dir='rtl'] &,
    :root:lang(ar) &,
    :root:lang(iw) & {
        background-position: left 0.7em top 50%, 0 0;
        padding: 0.6em 0.8em 0.5em 1.4em;
    }

    &:hover:not(&:disabled),
    &:focus:not(&:disabled),
    &:active:not(&:disabled) {
        outline: none;
        border-color: var(--primary-hover);
    }

    &:disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }
}