@import "../variables/variables";
@import "../mixins/private/token-mixins";

.select {
    @include color-token(select-foreground-color, color-foreground-primary);

    font-size: var(--font-size-default);
    position: relative;
}

span.select {
    display: inline-block;
}

.select select {
    appearance: none;
    border-radius: var(--select-border-radius, var(--border-radius-50));
    border-style: solid;
    border-width: 1px;
    color: inherit;
    font-family: inherit;
    font-size: 1em;
    height: 40px;
    padding: 0 var(--spacing-400) 0 var(--spacing-200);
    vertical-align: middle;
    @include background-color-token(
        select-background-color,
        color-background-secondary
    );
    @include border-color-token(select-border-color, color-stroke-default);
}

.select svg.icon--12 {
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 0;
}

.select--large select {
    font-size: var(--font-size-medium);
    height: 48px;
}

.select--fluid {
    width: 100%;
}

.select--fluid select {
    width: 100%;
}

.select--borderless select {
    background-color: transparent;
    border: 0;
    padding-left: 0;
    width: auto;

    &:focus {
        background-color: transparent;
        text-decoration: underline;
    }
}

.select select:focus {
    @include background-color-token(
        select-focus-background-color,
        color-background-primary
    );
}

.select select:focus:not(:read-only) {
    @include background-color-token(
        select-focus-background-color,
        color-background-primary
    );
    @include border-color-token(
        select-focus-border-color,
        color-stroke-default
    );

    outline: 0;
    text-decoration: underline;
}

/* custom IE pseudo selector for the arrow */
.select select::-ms-expand {
    display: none;
}

.select select[disabled] {
    @include border-color-token(
        textbox-disabled-border-color,
        color-background-disabled
    );
    @include color-token(
        select-disabled-foregound-color,
        color-foreground-disabled
    );

    opacity: 1;
}

.select select[disabled] + svg {
    @include color-token(
        select-disabled-foregound-color,
        color-foreground-on-disabled
    );
}

.select select[readonly] {
    background-color: transparent;
    border: none;
}

.select select[aria-invalid="true"] {
    @include border-color-token(
        select-invalid-border-color,
        color-stroke-attention
    );

    border-style: solid;
    border-width: 1px;

    &:focus {
        @include background-color-token(
            select-focus-background-color,
            color-background-primary
        );
        @include border-color-token(
            select-focus-border-color,
            color-stroke-default
        );
    }
}

/* stylelint-disable no-descending-specificity */
[dir="rtl"] {
    .select > select {
        padding-left: 30px;
        padding-right: var(--spacing-200);
    }

    .select svg {
        left: 16px;
        right: auto;
    }

    .select--underline svg.icon {
        left: 0;
        right: auto;
    }
}
/* stylelint-enable no-descending-specificity */
