.select {
    color: var(--select-foreground-color, var(--color-foreground-primary));
    font-size: var(--font-size-body);
    position: relative;
}
span.select {
    display: inline-block;
}
.select select {
    appearance: none;
    background-color: var(
        --select-background-color,
        var(--color-background-secondary)
    );
    border-color: var(--select-border-color, var(--color-border-medium));
    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;
}
.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,
.select--fluid select {
    width: 100%;
}
.select--borderless select {
    background-color: initial;
    border: 0;
    padding-left: 0;
    width: auto;
}
.select--borderless select:focus {
    background-color: initial;
    text-decoration: underline;
}
.select select:focus {
    background-color: var(
        --select-focus-background-color,
        var(--color-background-primary)
    );
}
.select select:focus:not(:read-only) {
    background-color: var(
        --select-focus-background-color,
        var(--color-background-primary)
    );
    border-color: var(--select-focus-border-color, var(--color-border-medium));
    outline: 0;
    text-decoration: underline;
}
.select select::-ms-expand {
    display: none;
}
.select select[disabled] {
    border-color: var(
        --textbox-disabled-border-color,
        var(--color-background-disabled)
    );
    color: var(
        --select-disabled-foregound-color,
        var(--color-foreground-disabled)
    );
    opacity: 1;
}
.select select[disabled] + svg {
    color: var(
        --select-disabled-foregound-color,
        var(--color-foreground-on-disabled)
    );
}
.select select[readonly] {
    background-color: initial;
    border: none;
}
.select select[aria-invalid="true"] {
    border-color: var(
        --select-invalid-border-color,
        var(--color-border-attention)
    );
    border-style: solid;
    border-width: 1px;
}
.select select[aria-invalid="true"]:focus {
    background-color: var(
        --select-focus-background-color,
        var(--color-background-primary)
    );
    border-color: var(--select-focus-border-color, var(--color-border-medium));
}
[dir="rtl"] .select > select {
    padding-left: 30px;
    padding-right: var(--spacing-200);
}
[dir="rtl"] .select svg {
    left: 16px;
    right: auto;
}
[dir="rtl"] .select--underline svg.icon {
    left: 0;
    right: auto;
}