$form-input-icon-size: 18px;

.form,
form {
  &-field {
    margin-bottom: 1rem;
    position: relative;
    // #Label
    @include e(label) {
      @include fontSize($font-size-xs);

      display: inline-block;
      margin-bottom: 0.25rem;
      color: var(--color-gray-500);
      cursor: pointer;


      .icon {
        @include fontSize($font-size-base);

        display: inline;
        vertical-align: middle;
        margin-left: calc-rem(6px);
      }
    }

    // #Label Note
    @include e(label-note) {
      @include fontSize($font-size-md);

      display: inline-block;
      margin-bottom: 0.25rem;
      color: var(--color-gray-400);
      cursor: pointer;
    }

    // #Input
    @include e(input) {
      @include fontSize($font-size-base);
      display: block;
      width: 100%;
      padding: calc-rem(8px 16px);
      border-radius: $border-radius-medium;
      border: 1px solid var(--color-gray-300);
      color: var(--color-black);
      line-height: $base-line-height;

      &:focus {
        border-color: var(--color-brand-dark);
      }

      &:focus-visible {
        outline: none;
      }

      @include m(wrapper) {
        // wrapper
        display: flex;
        position: relative;
        line-height: 1;

        @include m(fluid) {
          width: fit-content;
          max-width: 100%;
          margin-left: auto; // pin the right edge, grow leftward
          align-items: stretch;
          overflow: hidden;
          border: 1px solid var(--color-gray-300);
          border-radius: $border-radius-medium;
          background-color: var(--color-white, #fff);

          &:focus-within {
            border-color: var(--color-brand-dark);
          }

          .form-field__input {
            width: auto;
            min-width: 0;
            flex: 0 0 auto;
            box-sizing: border-box;
            border: 0;
            border-radius: 0;
            padding-right: 0;
            text-align: right;
            background-color: transparent;

            &:focus {
              border-color: transparent;
            }
          }

          .form-field__input--suffix {
            position: static !important;
            top: auto;
            right: auto;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            transform: none;
            margin-left: calc-rem(4px); // gap between the value and the symbol
            padding-right: calc-rem(16px);
            white-space: nowrap;
            pointer-events: none;

            &,
            i,
            .mat-icon {
              @include fontSize($font-size-base);

              width: auto;
              height: auto;
            }
          }
        }
      }

      @include m(sizer) {
        @include fontSize($font-size-base);

        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        padding: 0 0 0 calc-rem(16px);
        border: 0;
        box-sizing: border-box;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        white-space: pre;
        line-height: $base-line-height;
      }

      @include m(suffix) {
        // suffix
        position: absolute !important;
        top: 50%;
        right: calc-rem(16px);
        color: var(--color-gray-300);
        transform: translateY(-50%);

        &,
        i,
        .mat-icon {
          @include fontSize($form-input-icon-size);
          width: calc-rem($form-input-icon-size);
          height: calc-rem($form-input-icon-size);
        }
      }

      @include m(prefix) {
        // prefix
        @extend .form-field__input--suffix;

        right: unset;
        left: calc-rem(16px);
      }

      @include m(disabled) {
        // disabled
        background-color: var(--color-gray-100);
        opacity: .5;
        pointer-events: none;
      }

      @include m(invalid) {
        // invalid
        border-color: var(--color-error);
        color: var(--color-error);
      }
    }

    // #Textarea
    @include e(textarea) {
      @include fontSize($font-size-base);
      display: block;
      width: 100%;
      padding: calc-rem(16px);
      border-radius: $border-radius-medium;
      border: 1px solid var(--color-gray-300);
      color: var(--color-black);
      line-height: $base-line-height;

      &:focus {
        border-color: var(--color-brand-dark);
      }

      @include m(wrapper) {
        // wrapper
        display: flex;
        position: relative;
        line-height: 1;
      }

      @include m(suffix) {
        // suffix
        position: absolute !important;
        top: 50%;
        right: calc-rem(16px);
        color: var(--color-gray-100);
        transform: translateY(-50%);

        &,
        i,
        .mat-icon {
          @include fontSize($form-input-icon-size);
          width: calc-rem($form-input-icon-size);
          height: calc-rem($form-input-icon-size);
        }
      }

      @include m(prefix) {
        // prefix
        @extend .form-field__input--suffix;

        right: unset;
        left: calc-rem(16px);
      }

      @include m(disabled) {
        // disabled
        background-color: var(--color-gray-100);
        opacity: .5;
        pointer-events: none;
      }
    }

    // #Range
    @include e(range) {
      @include fontSize($font-size-base);
      display: block;
      width: 100%;
      padding: calc-rem(8px 16px);
      color: var(--color-black);
      line-height: $base-line-height;
      border: none;

      &:focus-visible {
        outline: none;
      }

      @include m(wrapper) {
        // wrapper
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        border-radius: calc-rem($border-radius-large);
        border: 1px solid var(--color-gray-300);
        align-items: center;
        line-height: 1;
        background-color: var(--color-white);

        &:focus-within {
          border-color: var(--color-brand-dark);
        }
      }

      @include m(suffix) {
        // suffix
        position: absolute !important;
        top: 50%;
        right: calc-rem(16px);
        color: var(--color-gray-100);
        transform: translateY(-50%);

        &,
        i,
        .mat-icon {
          @include fontSize($form-input-icon-size);
          width: calc-rem($form-input-icon-size);
          height: calc-rem($form-input-icon-size);
        }
      }

      @include m(prefix) {
        // prefix
        @extend .form-field__range--suffix;

        right: unset;
        left: calc-rem(16px);
      }

      @include m(disabled) {
        // disabled
        background-color: var(--color-gray-100);
        opacity: .5;
        pointer-events: none;
      }

      @include m(invalid) {
        // invalid
        border-color: var(--color-error) !important;
        color: var(--color-error) !important;
      }
    }

    // #Invalid
    @include m(invalid) {
      &,
      .form-field__input,
      .form-field__textarea,
      .form-field__range {
        color: var(--color-error);
        border-color: var(--color-error);
      }

      &,
      .form-field__range--wrapper {
        border-color: var(--color-error);
      }
    }

    // #Required
    @include m(required) {
      .form-field__label {
        &:after {
          @extend %required;
        }
      }
    }

    // #Validation
    @include e(validation) {
      @include fontSize($font-size-xs);

      padding-top: 0.5rem;
      color: var(--color-error);

      @include m(item) {
        padding-bottom: 0.6rem;

        &:last-of-type {
          padding-bottom: 0;
        }
      }
    }

    // #Subscript
    @include e(subscript) {
      @include m(wrapper) {
        @extend %pseudos;

        margin-top: 1.2rem;
      }
    }

    .spinner {
      position: absolute;
      right: 0.25rem;
      top: 1.85rem;
    }

    .hint {
      font-size: 10px;
      text-align: right;
      margin-right: calc-rem(17px);
      transform: translateY(-1rem);
      margin-bottom: -1rem;
    }
  }

  // ==========================================================================
  // #OVERRIDES
  // ==========================================================================
  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
    padding-top: 0;
  }

  .mat-mdc-form-field-infix {
    border-top: 0;
  }

  .mat-mdc-form-field .mat-mdc-form-field-flex {
    padding-top: 0;
  }
}

.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
  width: auto;
}

.mat-mdc-text-field-wrapper {
  padding-bottom: 0;
}