@use "../utilities/icons";
@use "../utilities/mixins";

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

@use "sass:map";

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

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

  &__select-wrapper {
    &:has(.kern-form-input__select--error) {
      border-color: var(--kern-color-feedback-danger, #bd0f09);
      background: var(--kern-color-feedback-danger-background, #feece8);

      &::after {
        background-color: var(--kern-color-feedback-danger, #bd0f09);
      }

      &:hover {
        border-color: var(--kern-color-feedback-danger, #bd0f09);
      }
    }

    position: relative;
    display: flex;
    height: var(--kern-metric-dimension-x-large, 48px);
    gap: var(--kern-metric-space-none, 0px);
    align-self: stretch;

    border-radius: var(--kern-metric-border-radius-small, 2px);
    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);

    @include mixins.forced-colors-border-1px;

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

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

      .kern-form-input__select {
        padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px)
          var(--kern-metric-baseline-body-default-padding-bottom, 2px)
          var(--kern-metric-space-default, 16px);

        @media (forced-colors: active) {
          padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
            var(--kern-40, 40px)
            var(--kern-metric-baseline-body-default-padding-bottom, 2px)
            var(--kern-metric-space-default, 16px);
        }
      }

      &:has(.kern-form-input__select:focus) {
        border-bottom: var(--kern-metric-border-width-default, 2px) solid
          var(--kern-color-form-input-border, #171a2b);

        .kern-form-input__select {
          padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
            var(--kern-40, 40px)
            var(--kern-metric-baseline-body-default-padding-bottom, 2px)
            var(--kern-metric-space-default, 16px);
        }
      }

      &:has(select[disabled]), &:has(select[aria-disabled="true"]) {
        border-bottom: var(--kern-metric-border-width-default, 2px) solid
          var(--kern-color-form-input-border, #171a2b);

        .kern-form-input__select {
          padding: var(--kern-metric-space-small, 6px)
            var(--kern-metric-space-default, 16px) var(--kern-4, 4px)
            var(--kern-metric-space-default, 16px);
        }
      }
    }

    &::after {
      content: " ";
      display: inline-block;
      position: absolute;
      right: var(--kern-metric-dimension-x-small, 16px);
      top: var(--kern-metric-dimension-default, 24px);

      transform: translateY(-50%);
      pointer-events: none;
      width: var(--kern-metric-dimension-default, 24px);
      height: var(--kern-metric-dimension-default, 24px);
      -webkit-mask: map.get(icons.$icons, "arrow-down");
      mask: map.get(icons.$icons, "arrow-down");
      background-color: var(--kern-color-action-default);

      @include mixins.forced-colors-style;
    }
  }

  &__select {
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
    border: none;
    appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;

    @include mixins.body-default;

    padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
      var(--kern-40, 40px)
      var(--kern-metric-baseline-body-default-padding-bottom, 2px)
      var(--kern-metric-space-default, 16px);

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

    &--error {
      &:focus {
        outline-color: var(--kern-color-feedback-danger, #bd0f09);
        background: var(--kern-color-feedback-danger-background, #feece8);
      }
    }

    option {
      margin: 40px;
      background: var(--kern-color-form-input-background, #f7f7f9);
    }

    &[disabled],
    &[disabled="disabled"],
    &[aria-disabled='true'] {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}