@use "../utilities/mixins";

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

.kern-form-check {
  display: grid;
  grid-template-columns: var(--kern-metric-dimension-large, 32px) auto;
  align-items: start;
  padding-right: var(--kern-metric-space-default, 16px);
  
  &__radio,
  &__checkbox {
    width: var(--kern-metric-dimension-large, 32px);
    height: var(--kern-metric-dimension-large, 32px);
    border: var(--kern-metric-border-width-default, 2px) solid
      var(--kern-color-form-input-border, #171a2b);
    background: var(--kern-color-form-input-background, #f7f7f9);
    margin: var(--kern-metric-space-none, 0px);
    appearance: none;

    &:hover {
      border: var(--kern-metric-border-width-bold, 4px) solid
        var(--kern-color-form-input-border, #171a2b);
    }

    &:focus,
    &:focus-visible {
      box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171a2b);
      outline-offset: var(--kern-metric-border-width-default, 2px);
      outline: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171a2b);
      border: var(--kern-metric-border-width-none, 0px);
      forced-color-adjust: none;
      @include mixins.forced-colors-focus;

      &:hover {
        border: var(--kern-metric-border-width-none, 0px);
      }
    }

    &:checked {
      &:focus,
      &:focus-visible {
        box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
          var(--kern-color-form-input-border, #171a2b);
        outline-offset: var(--kern-metric-border-width-bold, 4px);
        outline-color: transparent;
        border: var(--kern-metric-border-width-none, 0px);
        forced-color-adjust: none;
        @include mixins.forced-colors-focus;

        &:hover {
          border: var(--kern-metric-border-width-none, 0px);
        }
      }
    }

    &--error {
      &:focus,
      &:focus-visible {
        box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
          var(--kern-color-feedback-danger, #bd0f09);
        outline: var(--kern-metric-border-width-none, 0px);
        @media (forced-colors: active) {
          box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
            var(--kern-color-layout-background-inverted) !important;
          background-color: var(
            --kern-color-layout-background-default
          ) !important;
        }
      }

      &:checked {
        &:focus,
        &:focus-visible {
          box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
            var(--kern-color-feedback-danger, #bd0f09) !important;
          outline: var(--kern-metric-border-width-none, 0px);
          @media (forced-colors: active) {
            box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
              var(--kern-color-layout-background-inverted) !important;
            background-color: var(
              --kern-color-layout-background-default
            ) !important;
          }
        }
      }
    }

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

      &:checked {
        outline: var(--kern-metric-border-width-none, 0px);
      }

      &:hover {
        cursor: default;
      }

      ~ .kern-label {
        opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
        cursor: default;
      }
    }
  }

  .kern-label {
    font-weight: var(--kern-typography-font-weight-regular, 400);
    padding-top: var(--kern-metric-space-x-small, 4px);
    padding-left: var(--kern-metric-space-default, 16px);

    &:has(.kern-label__optional) {
      @include mixins.optional;
    }

    &__optional {
      color: var(--kern-color-layout-text-muted, #404565);
      font-weight: var(--kern-typography-font-weight-regular, 400);
    }
  }

  .kern-error {
    grid-column: span 2;
    padding-top: var(--kern-metric-space-small, 8px);

    .kern-icon {
      width: var(--kern-metric-dimension-default, 24px);
      height: var(--kern-metric-dimension-default, 24px);
      min-width: var(--kern-metric-dimension-default, 24px);
      min-height: var(--kern-metric-dimension-default, 24px);
    }
  }

  &--error {
    border-left: var(--kern-metric-border-width-bold, 4px) solid
      var(--kern-color-feedback-danger, #bd0f09);
    padding-left: var(--kern-metric-space-default, 16px);

    .kern-form-check__checkbox--error {
      border-color: var(--kern-color-feedback-danger, #bd0f09) !important;
      outline-color: var(--kern-color-feedback-danger, #bd0f09) !important;
      background: var(--kern-color-feedback-danger-background, #feece8);
    }

    .kern-form-check__radio {
      &:before {
        background-color: var(--kern-color-feedback-danger, #bd0f09);
      }
    }
  }
}