@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../feature-flags" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/skeleton" as *;

/// @type Number
/// @access public
/// @group global-themes
$input-label-weight: 400 !default;

@mixin form {
  .#{$prefix}--fieldset {
    @include reset;
  }

  .#{$prefix}--form-item {
    @include font-family("sans");
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
  }

  .#{$prefix}--label {
    @include reset;
    @include font-family("sans");
    @include type-style("body-short");
    color: $text-body-default;
    font-weight: $input-label-weight;
    font-weight: 600 !important;
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: $spacing-03;
  }

  .#{$prefix}--label + .#{$prefix}--form__helper-text {
    margin-top: -$spacing-03;
  }

  .#{$prefix}--form-item--inline {
    flex-direction: row;
    align-items: center;
  }

  .#{$prefix}--form-long {
    margin-bottom: -1rem;

    > .#{$prefix}--form-item {
      margin-bottom: 1.3rem;
    }
  }
  .#{$prefix}--form-item--light input,
  .#{$prefix}--form-item--light input[type="number"] {
    background: var(--field-02) !important;
  }

  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
    @include type-style("label-02");
  }

  .#{$prefix}--label--disabled {
    opacity: 0.5;
  }

  // Skeleton State
  .#{$prefix}--label.#{$prefix}--skeleton {
    width: calcRem(75px);
    height: calcRem(14px);
    @include skeleton;
  }

  input[data-invalid],
  textarea[data-invalid],
  select[data-invalid],
  .#{$prefix}--list-box[data-invalid] {
    border-color: $support-error-main; //$border-error
    //box-shadow: 0 2px 0px 0px var(--support-01);

    ~ .#{$prefix}--form-requirement {
      //max-height: calcRem(200px);
      display: block;
    }
  }

  .#{$prefix}--form-item--invalid {
    ~ .#{$prefix}--form-requirement {
      //max-height: calcRem(200px);
      display: block;
    }
  }

  // Fix for red ring when input is marked required in Firefox, refs #744
  input:not(output):not([data-invalid]):-moz-ui-invalid {
    box-shadow: none;
  }

  .#{$prefix}--form-requirement {
    @include reset;
    @include type-style("caption");
    margin: $spacing-01 0 0;
    font-weight: 600;
    font-size: 0.8em;
    max-height: 0;
    line-height: 1.5;
    display: none;
    order: 3;
    color: $support-error-main;
    // TODO: check if there is a better auto sizing for icons
    > svg {
      width: auto;
      height: 1em;
    }
    &.invalid {
      max-height: calcRem(200px);
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &::before {
      // content: '-';
      display: inline-block;
      color: $support-error-main; //$text-error
    }
  }

  .#{prefix}--form__helper-text--disabled {
    opacity: 0.5;
  }

  .#{$prefix}--form__helper-text {
    @include type-style("helper");
    color: $text-field-helper;
    order: 1;
    line-height: 1.5;
    z-index: 0;
    // max-height: 3rem;
    // opacity: 1;
    margin-bottom: $spacing-03;
  }
}