select {
    box-shadow: var(--shadow-input);
    background-color: var(--color-white);
    border: none;
    height: 40px;
    width: 100%;
    padding: 8px 36px 4px 10px;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    
    &:not([multiple]) {
        background-image: url("data:image/svg+xml,%3Csvg width='28' height='32' viewBox='0 0 28 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_iiii_40_1601)'%3E%3Crect width='28' height='32' fill='%23C3C3C3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.5699H8V14.2842H20V12.5699ZM18.2857 14.2842H9.71429V15.9985H11.4286V17.7128H13.1429V19.4271H14.8571V17.7128H16.5714V15.9985H18.2857V14.2842Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iiii_40_1601' x='0' y='0' width='28' height='32' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='4' dy='4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-4' dy='-4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_40_1601' result='effect2_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2' dy='2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_40_1601' result='effect3_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect3_innerShadow_40_1601' result='effect4_innerShadow_40_1601'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: right 4px center;
    }

    &:focus {
        outline: none;
    }

    &:disabled,
    &.is-disabled {
        background-color: var(--color-gray-200);
        color: var(--color-gray-300);
        &:not([multiple]) {
            background-image: url("data:image/svg+xml,%3Csvg width='28' height='32' viewBox='0 0 28 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_iiii_40_2248)'%3E%3Crect width='28' height='32' fill='%23C3C3C3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.71 14.2871H9.70999V16.0014H21.71V14.2871ZM19.9957 16.0014H11.4243V17.7157H13.1386V19.43H14.8528V21.1443H16.5671V19.43H18.2814V17.7157H19.9957V16.0014Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.5699H8V14.2842H20V12.5699ZM18.2857 14.2842H9.71429V15.9985H11.4286V17.7128H13.1429V19.4271H14.8571V17.7128H16.5714V15.9985H18.2857V14.2842Z' fill='%23808080'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iiii_40_2248' x='0' y='0' width='28' height='32' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='4' dy='4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-4' dy='-4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_40_2248' result='effect2_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2' dy='2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_40_2248' result='effect3_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect3_innerShadow_40_2248' result='effect4_innerShadow_40_2248'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
            background-position: right 4px center;
            background-repeat: no-repeat;
        }
    }

    &[multiple] {
        border-radius: 0;
        height: auto;
        padding-right: 4px;

        // TODO: Only shows when field is not focused, find a workaround
        option:checked{
            background: var(--color-blue);
            color: var(--color-white);
        }
    }
}