@use "../utilities/mixins";

/**
 * @file _input.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 Form Input Komponenten.
 *
 * Diese Datei enthält gemeinsame CSS-Regeln, um die Input Komponenten
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus, read-only, disabled)
 */

.kern-form-input {
  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;

  &:has(input[disabled], textarea[disabled], input[aria-disabled='true'], textarea[aria-disabled='true']) {
    cursor: not-allowed;

    .kern-label {
      cursor: not-allowed;
    }
  }

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

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

  &:has(.kern-hint) {
    .kern-label {
      margin-bottom: var(--kern-metric-space-none, 0px);
    }
  }

  .kern-hint {
    margin-bottom: var(--kern-metric-space-small, 8px);
  }

  &__input {
    @include mixins.body-default;
    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
    height: var(--kern-metric-dimension-x-large, 48px);
    align-items: center;
    align-self: stretch;

    border-radius: var(--kern-metric-border-radius-small, 2px);
    border: none; // reset border
    border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
    background: var(--kern-color-form-input-background, #F7F7F9);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
    @include mixins.forced-colors-border-1px;

    &:hover {
      border-width: var(--kern-metric-border-width-bold, 4px);
      padding-top: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px)); // Fix
    }

    &:focus {
      border-radius: var(--kern-metric-border-radius-small, 2px);
      outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
      background: var(--kern-color-form-input-background, #F7F7F9);
      border: none;
      padding-bottom: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px)); // Fix 

      &:hover {
        padding-top: var(--kern-metric-space-none, 0px);
      }
    }

    &[readonly],
    &[readonly="readonly"] {
      border-radius: var(--kern-metric-border-radius-none, 0px);
      border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
      background: inherit;
      cursor: not-allowed;
      @include mixins.forced-colors-border-1px;

      &:hover {
        padding-top: var(--kern-metric-space-none, 0px);
      }

      &:focus {
        border-radius: var(--kern-metric-border-radius-small, 2px);
        padding-top: var(--kern-metric-border-width-light, 1px);
        border-width: var(--kern-metric-border-width-none, 0);
      }
    }

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

      &:hover {
        border-width: var(--kern-metric-border-width-default, 2px);
        padding-top: var(--kern-metric-space-none, 0px);
      }
    }

    &--error {
      border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-feedback-danger, #BD0F09);
      background: var(--kern-color-feedback-danger-background, #FEECE8);
      @include mixins.forced-colors-border-1px;

      &:focus {
        outline-color: var(--kern-color-feedback-danger, #BD0F09);
        background: var(--kern-color-feedback-danger-background, #FEECE8);
        border: none;
      }

    }

    &--width-2 {
      max-width: var(--kern-metric-dimension-2x-large);
    }

    &--width-4 {
      max-width: var(--kern-metric-dimension-4x-large);
    }
  }

  /* File-INPUT */
  input[type="file"].kern-form-input__input {
    order: 4;
    display: flex;
    padding: var(--kern-metric-space-large, 24px);
    gap: 16px var(--kern-metric-space-default, 16px);
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--kern-metric-border-radius-small, 2px);
    outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border, #171A2B);

    border: none;
    height: inherit;

    &:hover {
      outline: none;
      box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171A2B);
      cursor: pointer;

      @media (forced-colors: active) {
        outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-layout-background-inverted);
        outline-offset: -4px; 
      }
    }

    &:focus {
      outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);

      &:hover {
        box-shadow: none;
      }
    }

    &[disabled],
    &[disabled="disabled"],
    &[aria-disabled='true'] {
      outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border, #171A2B);
      box-shadow: none;
      cursor: not-allowed;
    }

    &::file-selector-button {
      @include mixins.body-default;

      margin-right: var(--kern-metric-space-default, 16px);
      min-height: var(--kern-metric-dimension-x-large, 48px);
      padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
      border: none;
      border-radius: var(--kern-metric-border-radius-default, 4px);

      border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
      color: var(--kern-color-action-default, #1A3DA5);
      background: rgba(26, 61, 165, 0); // TODO: ändern
    }
  }

  .kern-error {
    order: 5;
    margin-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);

    /* File-INPUT */
    input[type="file"].kern-form-input__input,
    .kern-form-input__input[type="file"] {
      outline-color: var(--kern-color-feedback-danger, #BD0F09);

      &:hover {
        background: var(--kern-color-feedback-danger-background, #FEECE8);
        box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger, #BD0F09);
      }

      &:focus {
        outline-color: var(--kern-color-feedback-danger, #BD0F09);
      }
    }
  }

}

textarea {
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px) !important;
  min-height: var(--kern-metric-dimension-5x-large, 96px);

  &.kern-form-input__input {
    &:hover {
      padding-top: var(--kern-metric-space-none, 0px);
    }
  }
}

// Global
input[type="checkbox"],
input[type="color"],
input[type="file"],
input[type="radio"],
input[type="range"],
input[type=file],
/* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button,
/* chromes and blink button */
label,
option,
select {
  cursor: pointer;
}