@use "../utilities/mixins";

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

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

  .kern-label {
    color: var(--kern-color-action-default, #1A3DA5);
  }

  > .kern-icon {
    background-color: var(--kern-color-action-default, #1A3DA5);
    @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(--action-state-opacity-disabled, 0.4);
  }
}

// ##### Component #####
.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;

  &:has(.kern-sr-only) {
    width: var(--kern-metric-dimension-x-large, 48px);
  }
  
  &:has(.kern-sr-only-mobile) {
    @media (max-width: 767px) {
      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);
        box-shadow: 0 0 0 2px var(--kern-color-action-on-default),
          0 0 0 4px var(--kern-color-action-focus-border-inside),
          0 0 0 6px var(--kern-color-action-focus-border-outside);
        &: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, #1A3DA5);
    @media (forced-colors: active) {
      border: 3px solid transparent;
    }

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

    > .kern-icon {
      background-color: var(--kern-color-action-on-default, #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(--action-default, #1A3DA5);
        opacity: var(--action-state-opacity-disabled, 0.4);
    }
  }

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

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

    .kern-label {
      text-decoration: underline;
    }

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