/**
* @file _card.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 29.11.2024
* @modified 08.04.2026
* @@VERSION@@
* @brief Styles für die Card-Komponente.
*
* Diese Datei enthält die CSS-Regeln, um die Card-Komponente
* visuell darzustellen. Sie definiert das Grundaussehen.
* Variationen (default, small, large und active)
* Zustände active Card (:hover, :focus: :active), gesammte Card ist als Link klickbar.
* Cards innerhalb einer Zeile werden gleiche höhe dargestellt, 
* Mit Modifier (hug) hat Cards eigene höhe.
*/

@use "../utilities/mixins";

.kern-card {
    display: flex;
    padding: var(--kern-metric-space-none, 0px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kern-metric-space-none, 0px);
    flex-shrink: 0;

    border-radius: var(--kern-metric-border-radius-default, 4px);
    border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5);
    background: var(--kern-color-layout-background-default-contextual, #FFF);

    &:has(.kern-link--stretched:hover) {
       background: var(--kern-color-layout-background-default-contextual, #FFF);
    }

    height: 100%;

    &--hug {
        height: auto;

        .kern-card__container {
            height: auto;
        }
    }

    &__media {
        display: flex;
        padding: 0px var(--kern-metric-space-none, 0px);
        justify-content: center;
        align-items: center;
        align-self: stretch;

        * {
            width: 100%;
            overflow: hidden;
            border-top-left-radius: var(--kern-metric-border-radius-default, 4px);
            border-top-right-radius: var(--kern-metric-border-radius-default, 4px);
        }
    }

    &__container {
        display: flex;
        padding: var(--kern-metric-space-large, 24px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kern-metric-space-default, 16px);
        align-self: stretch;
        height: 100%;
    }

    &__header {
        display: flex;
        padding: var(--kern-metric-space-none, 0px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kern-metric-space-none, 0px);
        align-self: stretch;
    }

    &__body {
        display: flex;
        padding: var(--kern-metric-space-none, 0px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kern-metric-space-small, 8px); // TODO: das stelle ich in Frage, wir habe spaces über content. Warum dann noch gap?
        align-self: stretch;
        flex: 1 1 auto;
    }

    &__footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: var(--kern-metric-space-default, 16px);
        align-items: flex-start;
        gap: var(--kern-metric-space-default, 16px);
        align-self: stretch;

        .kern-btn {
            flex: 1 1 0;
            min-width: fit-content;
        }
    }

    // DEPRECATED: Die Klasse &--active ist veraltet und wird im nächsten Major-Release entfernt.
    // Bitte stattdessen &--interactive verwenden.
    &--active,
    &--interactive {
        position: relative;

        .kern-link--stretched {
            color: var(--kern-color-action-default-contextual, #2044AA);
            letter-spacing: var(--kern-metric-space-none, 0px);
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-thickness: var(--kern-1, 1px);
            /* 4.762% */
            text-decoration-skip-ink: none;
            text-underline-offset: var(--kern-3, 3px);
            /* 9.524% */

            &:after {
                position: absolute;
                top: var(--kern-metric-space-none, 0px);
                right: var(--kern-metric-space-none, 0px);
                bottom: var(--kern-metric-space-none, 0px);
                left: var(--kern-metric-space-none, 0px);
                z-index: 1;
                pointer-events: auto;
                content: "";
                background-color: transparent;
            }

            &:hover {
                text-decoration-thickness: 3px;

                /* 14.286% */
                &:after {
                    background: var(--kern-color-action-state-indicator-tint-hover-opacity);
                    // TODO: Backgroung color-layout-background-default-contextual
                }
            }

            &:active {
                &:after {
                    background: var(--kern-color-action-state-indicator-tint-active-opacity);
                }
            }

            &:focus-visible {
                outline: none;

                &:after {
                    border-radius: var(--kern-metric-border-radius-default, 0.25rem);
                    @include mixins.focus;
                    @include mixins.forced-colors-focus;
                }
            }
        }

    }

    &--small {
        .kern-card__container {
            padding: var(--kern-metric-space-default, 16px);
            gap: var(--kern-metric-space-small, 8px);

            .kern-card__header {
                .kern-preline {
                    @include mixins.preline-small;
                }

                .kern-title {
                    @include mixins.title-small;
                }

                .kern-subline {
                    @include mixins.subline-small;
                }
            }

            .kern-card__body {
                .kern-body {
                    @include mixins.body-small;
                }
            }
        }
    }

    &--large {
        .kern-card__container {
            padding: var(--kern-metric-space-x-large, 32px);
            gap: var(--kern-metric-space-large, 24px);

            .kern-card__header {

                .kern-preline {
                    @include mixins.preline-large;
                }

                .kern-title {
                    @include mixins.title-large;
                }

                .kern-subline {
                    @include mixins.subline-large;
                }
            }

            .kern-card__body {
                .kern-body {
                    @include mixins.body-large;
                }
            }
        }
    }

    &--surface {
        background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9);
    }
}