[CSS] Customer focus / disabled style for select element

Because there is no parent selector in CSS, we'll need to add an additional element to assist us in providing a focus style. We'll also add it to our multiple select so that it applies in both scenarios. The placement is important because we can affect elements that follow another element easily in CSS which we'll see.

<div class="form-group">
    <label for="select">Select</label>
    <div class="form-field select">
        <select id="select" name="select">...
        </select>
        <span class="focus"></span>
    </div>
</div>

.form-field {
    border-color: var(--color-default, color("default"));

    &:focus {
        @include field-focus;
    }

    &:disabled {
        @include field-disabled;
    }
}

.form-field.select {
    display: grid;
    align-items: center;
    grid-template-areas: "select";
    position: relative;

    background-image: linear-gradient(
        to top,
        scale-color(color("white"), $lightness: -10%),
        color("white") 33%
    );

    select, 
    &::after {
        grid-area: select;
    }

    &:not(.select--multiple)::after {
        content: "";
        width: 0.8em;
        height: 0.5em;
        background-color: var(--color-default, color("default"));
        justify-self: end;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }

    select {
        z-index: 1;

        &[multiple] {
            padding-right: 0;
        }
    }

    .focus {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: inherit;
        border: 2px solid transparent;
    }

    select:focus + .focus {
        @include field-focus;
    }

    &--disabled {
        @include field-disabled;
        
        background-image: linear-gradient(
            to top,
            rgba(black, 0.08),
            rgba(white, 0) 33%
        );
    }
}

mixin:

@mixin field-focus {
    border-color: var(--field-focus, color("primary"));
    box-shadow: 0 0 0.35em -0.1em var(--field-focus, color("primary"));
    outline: 2px solid transparent;
}

@mixin field-disabled {
    border-color: var(--color-disabled-border, color("disabled"));
    background-color: var(
        --color-disabled-background,
        color("disabled-background")
    );
    cursor: not-allowed;
    &,
    option {
        color: rgba(black, 0.45);
    }
}

All the idea that use to focus is add new element which class is `focus`, styling it and positioning it order to complete focus style.