@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.form-select {
    background-color: func.color(vars.$select-background-color);
    @include mixins.add-background-svg('expand-more');
    background-position: calc(100% - 10px);
    border: func.border(vars.$select-border);
    border-radius: vars.$select-border-radius;
    color: func.color(vars.$select-text-color);
    display: block;
    font-size: func.font-size(vars.$select-font-size);
    line-height: func.units(vars.$select-line-height, 'rem');
    height: calc(#{func.units(vars.$select-line-height, 'rem')} + (8px * 2));
    max-width: 32rem;
    width: 100%;
    margin-top: func.units(3);
    text-align: left;
    padding: calc(8px - #{func.border-width(vars.$select-border)}) calc(16px - #{func.border-width(vars.$select-border)});
    padding-right: func.units(6);
    @include mixins.appearance-none;

    &:-moz-focusring {
        color: func.color('transparent');
        text-shadow: 0 0 0 func.color('black');
    }

    &:focus,
    &.focus {
        @include mixins.focus;
    }

    &::-ms-expand {
        display: none;
    }

    &:disabled {
        background-color: func.color(vars.$input-disabled-background-color);
        color: func.color(vars.$input-disabled-text-color);
        cursor: not-allowed;
    }

    option {
        @-moz-document url-prefix() {
            font-family: Helvetica, Arial, sans-serif;
        }
    }

}