@use "../utilities/mixins";

/**
 * @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 11.09.2025
 * @@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.
 */

.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(--layout-border, #A5AAC3);
  background: var(--kern-color-layout-background-default, #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, #1A3DA5);
      letter-spacing: var(--kern-metric-space-none, 0px);
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: var(--kern-1, 1px);
      /* 4.762% */
      text-underline-offset: var(--kern-2, 2px);
      /* 9.524% */
      text-underline-position: from-font;

      &: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);
        }
      }

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

      &:focus-visible {
        outline-color: transparent;

        &:after {
          border-radius: var(--kern-metric-border-radius-default, 0.25rem);
          box-shadow: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 2px var(--kern-color-action-on-default), // TODO: Variable mit Design überprüfen
            var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 4px var(--kern-color-action-focus-border-inside),
            var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
           @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;
        }
      }
    }
  }

}