/**
* @file _select.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 09.04.2026
* @@VERSION@@
* @brief Styles für die Form Select Komponenten.
*
* Diese Datei enthält gemeinsame CSS-Regeln, um die Select Komponenten
* visuell darzustellen. Sie definiert das Grundaussehen,
* Zuständ (:hover, :focus, disabled)
*/

@use "../utilities/icons";
@use "../utilities/mixins";
@use "sass:map";

.kern-form-input {
    &:has(select[disabled]),
    &:has(select[aria-disabled='true']) {
        cursor: not-allowed;

        .kern-label {
            cursor: not-allowed;
        }
    }

    &__select-wrapper {
        &:has(.kern-form-input__select--error) {
            border-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);

            &::after {
                background-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            }

            &:hover {
                border-color: var(--kern-color-feedback-danger-contextual, #C31C13);
            }
        }

        position: relative;
        display: flex;
        height: var(--kern-metric-dimension-x-large, 48px);
        gap: var(--kern-metric-space-none, 0px);
        align-self: stretch;

        border-radius: var(--kern-metric-border-radius-small, 2px);
        border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034);
        background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);

        @include mixins.forced-colors-border-1px;

        &:has(select[disabled]),
        &:has(select[aria-disabled="true"]) {
            opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
        }

        &:hover {
            border-bottom: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border-contextual, #1D2034);

            .kern-form-input__select {
                padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);

                @media (forced-colors: active) {
                    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
                }
            }

            &:has(.kern-form-input__select:focus) {
                border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034);

                .kern-form-input__select {
                    padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
                }
            }

            &:has(select[disabled]),
            &:has(select[aria-disabled="true"]) {
                border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034);

                .kern-form-input__select {
                    padding: var(--kern-metric-space-small, 6px) var(--kern-metric-space-default, 16px) var(--kern-4, 4px) var(--kern-metric-space-default, 16px);
                }
            }
        }

        &::after {
            content: " ";
            display: inline-block;
            position: absolute;
            right: var(--kern-metric-dimension-x-small, 16px);
            top: var(--kern-metric-dimension-default, 24px);

            transform: translateY(-50%);
            pointer-events: none;
            width: var(--kern-metric-dimension-default, 24px);
            height: var(--kern-metric-dimension-default, 24px);
            -webkit-mask: map.get(icons.$icons, "arrow-down");
            mask: map.get(icons.$icons, "arrow-down");
            background-color: var(--kern-color-action-default);

            @include mixins.forced-colors-style;
        }
    }

    &__select {
        background-color: transparent;
        box-sizing: border-box;
        width: 100%;
        border: none;
        appearance: none;
        text-overflow: ellipsis;
        overflow: hidden;

        @include mixins.body-default;

        padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);

        &:focus {
            border-radius: var(--kern-metric-border-radius-small, 2px);
            @include mixins.focus;
            background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
            border: none;
        }

        &--error {
            &:focus {
                outline-color: var(--kern-color-feedback-danger-contextual, #C31C13);
                background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0);
            }
        }

        option {
            margin: 40px;
            background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
        }

        &[disabled],
        &[disabled="disabled"],
        &[aria-disabled='true'] {
            opacity: 0.7;
            cursor: not-allowed;
        }
    }
}