/*------------------------------------*\
    SELECT
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_select-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: max-content;
    min-width: 10em;
    @include helpers.ds_responsive-margin(3, bottom);
}

.ds_select {
    @include helpers.ds_input;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: settings.$ds_colour__background--primary;
    grid-area: 1/1/1/3;
    padding-right: 3rem - settings.$field-border-width;
}

///
/// [1] renders an outline/border in windows high contrast mode
///
.ds_select-arrow {
    display: block;
    grid-area: 1/2/1/2;
    outline: 0.125rem solid transparent; /// [1]
    outline-offset: -0.125rem; /// [1]
    pointer-events: none;
    position: relative;
    width: 3rem;

    &::before {
        bottom: 0;
        color: settings.$ds_colour__text;
        font-size: 1rem;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;

        @include helpers.ds_chevron(down, 0.75em);
        right: calc(50% - 0.375em);
        top: calc(50% - 0.5625em);
    }
}