/**
* @file _dropdown.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 29.08.2025
* @version 2.x.x
* @brief Styles für die Dropdown Komponente.
*
* Diese Datei enthält die CSS-Regeln, um die Dropdown Komponente
* visuell darzustellen. Sie definiert das Grundaussehen.
*
* Dropdown ist noch in der Entwicklungsphase und nicht teil des Desingn System CSS-Framworks!!!
*
*/

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

.kern-dropdown {
    position: relative;

    &[open] {
        .kern-dropdown__header {
            &::before {
                content: "";
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: var(--kern-metric-space-none, 0px);
                left: var(--kern-metric-space-none, 0px);
                cursor: auto;
            }
        }
    }

    &__header {
        cursor: pointer;
        list-style-type: none;

        display: inline-flex;
        min-height: var(--kern-metric-dimension-x-large, 48px);
        justify-content: center;
        align-items: center;
        vertical-align: top;
        gap: var(--kern-metric-space-none, 0px);
        border: none;
        border-radius: var(--kern-metric-border-radius-default, 4px);
        @include mixins.body-default;
        padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
        color: var(--kern-color-action-default, #1A3DA5);

        &::after {
            content: '';
            width: var(--kern-metric-dimension-default, 24px);
            min-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");
            mask-size: cover;
            mask-repeat: no-repeat;
            background-color: var(--kern-color-action-default, #1A3DA5);
            @include mixins.forced-colors-style;
        }

        &:hover {
            background: var(--kern-color-action-state-indicator-tint-hover-opacity);
            cursor: pointer;
        }

        .kern-label {
            color: var(--kern-color-action-default, #1A3DA5);
            padding: var(--kern-metric-space-small, 8px);
        }
    }

    &__body {
        display: flex;
        z-index: 99;
        position: absolute;
        left: 0;
        flex-direction: column;
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
        margin: 2px;
        white-space: nowrap;
        background: var(--kern-color-layout-background-default);
        border-radius: var(--kern-metric-border-radius-default);

        .kern-list {
            padding: 0;

            li {
                margin-bottom: var(--kern-metric-space-none, 0px);
                padding: 0.25rem 1rem 0.25rem 0;
                list-style: none;
                position: relative;

                &:hover {
                    background: var(--kern-color-action-state-indicator-tint-hover-opacity);
                    cursor: pointer;
                }

                .kern-link {
                    text-decoration: none;
                }

                &:has(input:checked) {
                    &:before {
                        content: "";
                        -webkit-mask: map.get(icons.$icons, "check");
                        mask: map.get(icons.$icons, "check");
                        background-color: var(--kern-color-action-default, #1A3DA5);
                        position: absolute;
                        top: 8px;
                        left: 8px;
                        width: 24px;
                        height: 24px;
                        @include mixins.forced-colors-style;
                    }
                }

                label {
                    width: 100%;
                    display: block;
                    padding-left: 2.5rem;
                    color: var(--kern-color-action-default, #1A3DA5);

                    input {
                        all: unset;
                    }
                }

            }
        }
    }
}