@use '../border-width' as *;
@use '_focus' as *;
@use '_helpers' as *;
@use '_high-contrast' as *;
@use '_hover' as *;
@use '../spacing' as *;
@use '../spacing-rem' as *;
@use '../radius' as *;
@use '../text' as *;
@use '../theme' as *;
@use '../transition' as *;

@mixin input-label-base($hasHint: false, $theme: 'light') {
  @include utility-medium;
  display: block;
  min-height: $spacing-24-rem;

  @if $theme == 'dark' {
    color: $theme-dark-content-color-primary;
  }

  
  &:has(input) {
    padding-block-start: $spacing-2;
    
    & input {
      @if $hasHint {
        margin-block-start: $spacing-8;
      } @else {
        margin-block-start: 10px;
      }
    }
    
    & :first-child:not(input) {
      
      margin-block-start: $spacing-4;
      
      margin-block-end: 0;
    }
  }
  
  &:not(:has(input)) {
    
    max-width: fit-content;
    padding-block: $spacing-2;

    @if $hasHint {
      margin-block-end: $spacing-2;
    } @else {
      margin-block-end: $spacing-8;
    }
  }
}

@mixin input-label-disabled() {
  @include high-contrast-media-query {
    color: GrayText;
  }
}

@mixin input-label-required() {
  &:after {
    content: '*';
    margin-inline-start: $spacing-2;
    font-family:
      'STIHL Contraface Digital Text Regular',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      sans-serif;
  }
}

@mixin input-hint-base($theme: 'light') {
  @include utility-small;
  display: block;
  max-width: 25.5rem;
  margin-block-end: $spacing-8;

  @if $theme == 'dark' {
    color: $theme-dark-content-color-primary;
  }
}

@mixin input-base($size, $theme: 'light') {
  @if ($size == 'medium') {
    
    @include utility-medium;

    padding-inline-start: adjust-spacing-for-border-1($spacing-16);
    padding-inline-end: adjust-spacing-for-border-1($spacing-16);
    min-height: $spacing-48-rem;
    height: $spacing-48-rem;
  } @else if($size == 'small') {
    @include utility-small;
    
    padding-inline-start: adjust-spacing-for-border-1($spacing-8);
    padding-inline-end: adjust-spacing-for-border-1($spacing-8);
    
    min-height: $spacing-32-rem;
    height: $spacing-32-rem;
  }

  
  @include focus($theme: $theme, $offset: 0, $thickness: $spacing-1);
  @include transition((background-color, color));

  @include hover-media-query {
    &:hover {
      @if $theme == 'light' {
        background: $theme-light-background-color-transparent-hover;
      } @else {
        background: $theme-dark-background-color-transparent-hover;
      }
      @include high-contrast-media-query {
        border-color: Highlight;
      }
    }
  }

  & {
    background: transparent;
    border-radius: $radius-none;
    width: 100%;
    @if $theme == 'light' {
      border: $border-width-1 solid $theme-light-border-color-primary;
      color: $theme-light-content-color-primary;
    } @else {
      border: $border-width-1 solid $theme-dark-border-color-primary;
      color: $theme-dark-content-color-primary;
    }
  }

  &[readonly] {
    border-color: transparent;
    @if $theme == 'light' {
      background-color: $theme-light-background-color-tertiary;
      color: $theme-light-content-color-primary;
    } @else {
      background-color: $theme-dark-background-color-tertiary;
      color: $theme-dark-content-color-primary;
    }

    @include focus($theme: $theme, $offset: 0, $thickness: $spacing-2);
  }

  &:disabled {
    background-color: transparent;
    cursor: not-allowed;
    @if $theme == 'light' {
      border-color: $theme-light-border-color-primary-disabled;
      color: $theme-light-content-color-primary-disabled;
    } @else {
      border-color: $theme-dark-border-color-primary-disabled;
      color: $theme-dark-content-color-primary-disabled;
    }
  }

  &::-webkit-placeholder,
  &::placeholder {
    opacity: 1;
    @if $theme == 'light' {
      color: $theme-light-content-color-secondary;
    } @else {
      color: $theme-dark-content-color-secondary;
    }
  }

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  &[type='search'] {
    appearance: none;
    -webkit-appearance: none;
  }

  &[type='range'] {
    accent-color: $color-core-orange-dark;
  }

  &[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

@mixin input-invalid($theme: 'light') {
  @if $theme == 'light' {
    border-color: $theme-light-border-color-feedback-error;
    outline-color: $theme-light-border-color-feedback-error;

    &:active,
    &:focus,
    &:focus-visible {
      border-color: $theme-light-border-color-primary;
    }
  } @else {
    border-color: $theme-dark-border-color-feedback-error;
    outline-color: $theme-dark-border-color-feedback-error;

    &:active,
    &:focus,
    &:focus-visible {
      border-color: $theme-dark-border-color-primary;
    }
  }
}