.select {
    &-wrapper {
        @extend .flex-column;

        position: relative;
    }

    &__field-container {
        @extend .align-center;

        gap: 10px;
        position: relative;
        width: 100%;
        font-size: var(--p);
        border: 1px solid var(--transp-2);
        border-radius: var(--border05);
        color: var(--text);
        background-color: transparent;
        transition: border var(--transition), background-color var(--transition);

        >select {
            padding: 0.75em 1em 0.75em 1em;
            padding-right: 2.3em;
        }

        &:focus-within:not(.select__field-container-readonly):not(.has-error) {
            border-color: var(--primary-300);
        }

        &.has-error {
            border-color: var(--error);
        }

        option {
            background-color: var(--background);
        }
    }

    &__field {
        font: inherit;
        outline: 0;
        border: 0;
        padding: 0;
        margin: 0;
        flex: 1;
        background-color: transparent;
        color: inherit;
        width: 100%;
        appearance: none;
    }

    &__toggle-icon {
        position: absolute;
        right: 1em;
        pointer-events: none;
    }

    &__error {
        color: var(--error);
        font-size: var(--small);
        font-weight: 500;
        letter-spacing: 0.02em;
        margin-top: 0.2em;
    }
}