/**
 * @file _button.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 08.04.2026
 * @@VERSION@@
 * @brief Styles für die Button-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Button-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zustände (:hover, :active, :focus, :disabled) und mögliche
 * Variationen (primary, secondary und tertiary).
 */

@use "sass:map";
@use "../utilities/mixins";
@use '../utilities/maps';


// ##### Mixins #####
@mixin light-button {
    background: transparent; // TODO: transparent als variable definieren

    .kern-label {
        color: var(--kern-color-action-default-contextual, #2044AA);
    }

    >.kern-icon {
        background-color: var(--kern-color-action-default-contextual, #2044AA);
        @include mixins.forced-colors-style;
    }

    &:not(:disabled):hover,
    &:not([aria-disabled='true']):hover {
        background: var(--kern-color-action-state-indicator-tint-hover-opacity);
    }

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

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

.kern-btn {
    display: inline-flex;
    min-height: var(--kern-metric-dimension-x-large, 48px);
    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
    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);
    position: relative;

    // // Tooltip
    // // In HTML Button add data-tooltip="VW kopieren"
    // &:hover::after {
    //   content: attr(data-tooltip);
    //   position: absolute;
    //   bottom: 125%;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   background-color: var(--kern-color-layout-text-default, #171A2B);
    //   color: var(--kern-color-action-on-default, #fff);
    //   padding: var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-small, 8px);
    //   border-radius: var(--kern-metric-border-radius-default, 4px);
    //   white-space: nowrap;
    //   font-size: var(--kern-font-size-12, 0.75rem);
    //   z-index: 100000;‚
    // }

    &:has(.kern-sr-only) {
        width: var(--kern-metric-dimension-x-large, 48px);
    }

    &:has(.kern-sr-only-mobile) {
        @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) {
            width: var(--kern-metric-dimension-x-large, 48px);
        }
    }

    .kern-label {
        padding: var(--kern-metric-space-small, 8px);
    }

    &:not(:disabled):hover,
    &:not([aria-disabled='true']):hover {
        cursor: pointer;
    }

    &:not([disabled]),
    &:not([aria-disabled='true']) {
        &:not([tabindex="-1"]) {
            &:focus {
                border-radius: var(--kern-metric-border-radius-default, 0.25rem);
                @include mixins.focus-offset;
            }

            &:focus-visible {
                @include mixins.forced-colors-focus;
            }
        }
    }

    &:disabled,
    &[disabled],
    &[aria-disabled='true'] {
        cursor: not-allowed !important;
        //pointer-events:  none !important;
    }

    &--block {
        width: 100%;
    }

    // primary button
    &--primary {
        background: var(--kern-color-action-default-contextual, #2044AA);

        @media (forced-colors: active) {
            border: 3px solid transparent;
        }

        .kern-label {
            color: var(--kern-color-action-on-default-contextual, #FFF);
        }

        >.kern-icon {
            background-color: var(--kern-color-action-on-default-contextual, #FFF);
            @include mixins.forced-colors-style;
        }

        &:not(:disabled):hover,
        &:not([aria-disabled='true']):hover {
            background: var(--kern-color-action-state-indicator-shade-hover);
        }

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

        &:disabled,
        &[disabled],
        &[aria-disabled='true'] {
            background: var(--kern-color-action-default-contextual, #2044AA);
            opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
        }
    }

    // secondary button
    &--secondary {
        border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default-contextual, #2044AA);
        @include light-button;
        @include mixins.forced-colors-border-1px;
    }

    // tertiary button
    &--tertiary {
        @include light-button;

        .kern-label {
            text-decoration: underline;
            text-decoration-skip-ink: none;
            text-underline-offset: var(--kern-3, 3px);
        }

        &:hover {
            .kern-label {
                text-decoration-thickness: var(--kern-3, 3px);
            }

            &:disabled,
            &[disabled],
            &[aria-disabled='true'] {
                .kern-label {
                    text-decoration-thickness: var(--kern-metric-border-width-light, 1px);
                }
            }
        }

        &:has(.kern-icon) {
            .kern-label {
                text-decoration: none;
            }
        }
    }

    &--x-small {
        position: relative;
        min-height: var(--kern-metric-dimension-large, 32px);
        padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px);
        margin-top: var(--kern-metric-space-small, 8px);
        margin-bottom: var(--kern-metric-space-small, 8px);

        .kern-label {
            font-size: var(--kern-typography-font-size-small-static, 16px);
            padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0) var(--kern-metric-space-x-small, 4px);
        }

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

        // Klickflächen vergrössern
        &::before {
            content: "";
            display: block;
            position: absolute;
            top: calc(var(--kern-metric-space-small, 8px) * -1);
            right: var(--kern-metric-space-none, 0);
            bottom: calc(var(--kern-metric-space-small, 8px) * -1);
            left: var(--kern-metric-space-none, 0);
            background: transparent;
        }

        &:has(.kern-sr-only) {
            width: var(--kern-metric-dimension-large, 32px);
            margin: var(--kern-metric-space-small, 8px);

            &::before {
                right: calc(var(--kern-metric-space-small, 8px) * -1);
                left: calc(var(--kern-metric-space-small, 8px) * -1);
            }
        }

        &:has(.kern-sr-only-mobile) {
            @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) {
                width: var(--kern-metric-dimension-large, 32px);
                margin: var(--kern-metric-space-small, 8px);

                &::before {
                    right: calc(var(--kern-metric-space-small, 8px) * -1);
                    left: calc(var(--kern-metric-space-small, 8px) * -1);
                }
            }
        }

    }
}

.kern-btn-wrapper {
    display: flex;
    gap: var(--kern-metric-space-small, 8px);
    flex-wrap: wrap;

    &:has(.kern-btn--x-small) {
        &:has(.kern-sr-only) {
            gap: var(--kern-metric-space-none, 0px);
        }

        &:has(.kern-sr-only-mobile) {
            @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) {
                gap: var(--kern-metric-space-none, 0px);
            }
        }
    }
}