// Hydrogen / Component / Styles

// This reset mixin is used to specify component level style resets if they're needed. These styles only apply to the versioned instance of the component.
@mixin h2-component-forms-reset() {}

// This mixin specifies generic styles that apply to all variations/combinations of this component.
@mixin h2-component-form-text-generic(
  $gray,
  $black,
  $error-color,
  $focus-color,
  $font,
  $font-size-small,
  $font-size-default,
  $radius,
  $padding
) {
  width: 100%;

  * {
    font-family: $font;
    line-height: 1;
  }

  [data-h2-input-title-wrapper] {
    align-items: flex-end;
    display: flex;

    [data-h2-input-label-wrapper] {
      flex: 0 0 50%;
      max-width: 50%;

      [data-h2-input-label] {
        display: inline-block;
        font-weight: bold;
        font-size: $font-size-small;
      }

    }

    [data-h2-input-data-wrapper] {
      flex: 0 0 50%;
      max-width: 50%;
      text-align: right;

      [data-h2-input-required] {
        color: $error-color;
        display: none;
        font-size: $font-size-small;
        margin-left: .5vw;
      }

      [data-h2-input-optional] {
        color: $gray;
        display: inline-block;
        font-size: $font-size-small;
        margin-left: .5vw;
      }

      [data-h2-input-data] {
        font-size: $font-size-small;
        margin-left: .5vw;
      }

    }

  }

  [data-h2-input-wrapper] {
    position: relative;

    [data-h2-input] {
      border-color: $gray;
      border-radius: $radius;
      border-style: solid;
      border-width: 1px;
      color: $black;
      font-size: $font-size-default;
      margin-top: calc(#{$padding} / 2);
      outline: none;
      padding-top: calc(#{$padding} / 1.3);
      padding-bottom: calc(#{$padding} / 1.3);
      padding-left: $padding;
      padding-right: $padding;
      width: 100%;

      &:focus {
        box-shadow: -1px -1px 0 $focus-color, 0 -1px 0 $focus-color, 1px -1px 0 $focus-color, 1px 0 0 $focus-color, 1px 1px 0 $focus-color, 0 1px 0 $focus-color, -1px 1px 0 $focus-color, -1px 0 0 $focus-color;
      }

    }
      
  }

  [data-h2-input-context-wrapper] {
    display: flex;
    padding-top: calc(#{$padding} / 2);

    [data-h2-input-error-wrapper] {
      flex: 0 0 80%;
      max-width: 80%;
      [data-h2-input-error] {
        color: $error-color;
        display: none;
        font-size: $font-size-small;
      }
    }

    [data-h2-input-info-trigger-wrapper] {
      flex: 0 0 20%;
      max-width: 20%;
      text-align: right;

      [data-h2-input-info-trigger] {
        background: none;
        border: none;
        cursor: pointer;
        font-size: $font-size-small;
        outline: none;
        padding: 0;
        text-decoration: underline;

        // Accessibility Label
        [data-h2-input-info-trigger-label] {
          height: 1px;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: -100vw;
          width: 1px;
        }

        [data-h2-input-info-trigger-more-label] {
          display: inline;
        }

        [data-h2-input-info-trigger-less-label] {
          display: none;
        }

        &:focus {
          box-shadow: -1px -1px 0 $focus-color, 0 -1px 0 $focus-color, 1px -1px 0 $focus-color, 1px 0 0 $focus-color, 1px 1px 0 $focus-color, 0 1px 0 $focus-color, -1px 1px 0 $focus-color, -1px 0 0 $focus-color;
        }

      }

    }

  }

  [data-h2-input-info-wrapper] {
    display: none;
    padding-top: calc(#{$padding} / 2);

    * {
      font-size: $font-size-small;
    }

  }

  &.h2-required {

    [data-h2-input-title-wrapper] {

      [data-h2-input-data-wrapper] {

        [data-h2-input-required] {
          display: inline-block;
        }

        [data-h2-input-optional] {
          display: none;
        }

      }

    }

  }

  &.h2-invalid {

    [data-h2-input-context-wrapper] {

      [data-h2-input-error-wrapper] {

        [data-h2-input-error] {
          display: inline-block;
        }

      }

    }

    [data-h2-input-wrapper] {

      [data-h2-input] {
        border-color: $error-color;
      }

    }

  }

  &.h2-active {

    [data-h2-input-info-trigger-wrapper] {

      [data-h2-input-info-trigger] {

        [data-h2-input-info-trigger-more-label] {
          display: none;
        }

        [data-h2-input-info-trigger-less-label] {
          display: inline;
        }

      }

    }

    [data-h2-input-info-wrapper] {
      display: block;
    }

  }

}