@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../objects/button/button';
@use 'date-box';

@mixin form-background($name, $background, $elementColor, $textColor: '') {
  &--#{$name} {
    @if $textColor {
      color: $textColor;
    }

    background-color: $background;
    #{$object-prefix}text-input,
    #{$object-prefix}input-field,
    #{$object-prefix}textarea,
    #{$object-prefix}select-list__trigger,
    #{$object-prefix}select {
      background-color: $elementColor !important;
    }

    @if $name == 'white' {
      #{$object-prefix}upload-input__button {
        @extend #{$object-prefix}button--light-grey;
      }
    } @else {
      #{$object-prefix}upload-input__button {
        @extend #{$object-prefix}button--white;
      }
    }
  }
}

#{$component-prefix}form {
  $warning-color: #d22100; // $red is to bright for a11y

  #{$object-prefix}upload-input__button {
    @extend #{$object-prefix}button--light-grey;
  }

  /* Color for form elements depending on background on form*/
  @include form-background('light-grey', $light-grey, $white);
  @include form-background('yellow-50', $yellow-50, $white);
  @include form-background('green-50', $green-50, $white);

  &--validated {
    // Validation messages
    [role='alert'] {
      @include typography.label-large;
      display: block;
      margin-top: $spacer-1;
      color: $warning-color;
    }

    .is-required,
    .o-label--required::after {
      color: $warning-color;
    }
    input:invalid,
    .invalid {
      border-color: $warning-color;
      outline-color: $warning-color;
    }
  }

  &__field {
    margin-bottom: $spacer-3;
    textarea,
    input {
      width: 100%;
      box-sizing: border-box;
    }

    label {
      @include typography.headline-large;
      line-height: 3rem;
      color: $sodra-black;
    }
  }
}