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

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

.kern-accordion {
    @include mixins.normalize;
    border-radius: var(--kern-metric-border-radius-none, 0px);
    border-top: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5);
    border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5);

    +.kern-accordion {
        margin-top: calc(var(--kern-metric-border-width-light) * -1);
    }

    &[open] {
        >summary {
            &::after {
                -webkit-mask: map.get(icons.$icons, "arrow-up");
                mask: map.get(icons.$icons, "arrow-up");
                background-color: var(--kern-color-action-default-contextual, #2044AA);
                @include mixins.forced-colors-style;
            }

            &:not([tabindex="-1"]) {
                &:focus-visible {
                    position: relative;
                    z-index: 1;
                    @include mixins.focus-offset;
                    box-shadow:
                        0 -1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5),
                }
            }
        }
    }

    &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--kern-metric-space-small, 8px);
        flex: 1 0 0;
        padding: var(--kern-metric-space-default, 16px) var(--kern-metric-space-x-small, 4px);

        // remove default icon
        list-style-type: none;

        &::-webkit-details-marker,
        &::marker {
            display: none
        }

        &::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-contextual, #2044AA);
            @include mixins.forced-colors-style;
        }

        &:hover {
            background: var(--kern-color-action-state-indicator-tint-hover-opacity); // TODO: token überprüfen!!!
            cursor: pointer;
        }

        &:not([tabindex="-1"]) {
            &:focus-visible {
                position: relative;
                z-index: 1;
                @include mixins.focus-offset;
                box-shadow:
                    0 -1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5),
                    0 1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5);
                @include mixins.forced-colors-focus;
            }
        }

        .kern-title {
            color: var(--kern-color-action-default-contextual, #2044AA);
            flex: 1;
            overflow-wrap: break-word
        }
    }

    &__body {
        padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-small, 4px);
    }
}