// stylelint-disable selector-max-compound-selectors
// stylelint-disable selector-max-type

// Form groups
//
// Usage:
//
// <div class="form-group">
//   <div class="form-group-header"> containing the label
//   <div class="form-group-body"> containing the form elements
// </div>

.form-group {
  // stylelint-disable-next-line primer/spacing
  margin: 15px 0;

  // Text fields
  .form-control {
    width: 440px;
    max-width: 100%;
    // stylelint-disable-next-line primer/spacing
    margin-right: 5px;
    background-color: var(--color-input-contrast-bg);

    &:focus {
      background-color: var(--color-input-bg);
    }

    &.shorter { width: 130px; }

    &.short { width: 250px; }

    &.long { width: 100%; }
  }

  // Textarea
  // stylelint-disable selector-no-qualifying-type
  textarea.form-control {
    width: 100%;
    height: 200px;
    min-height: 200px;

    &.short {
      height: 50px;
      min-height: 50px;
    }
  }
  // stylelint-enable selector-no-qualifying-type

  // The Label
  dt, // TODO: Deprecate
  .form-group-header {
    // stylelint-disable-next-line primer/spacing
    margin: 0 0 6px;
  }

  label {
    position: relative;
  }

  &.flattened dt, // TODO: Deprecate
  &.flattened .form-group-header {
    float: left;
    margin: 0;
    // stylelint-disable-next-line primer/typography
    line-height: 32px;
  }

  &.flattened dd, // TODO: Deprecate
  &.flattened .form-group-body {
    // stylelint-disable-next-line primer/typography
    line-height: 32px;
  }

  //
  // Form Elements
  //
  // stylelint-disable selector-no-qualifying-type
  dd, // TODO: Deprecate
  .form-group-body {
    h4 {
      margin: $spacer-1 0 0;

      &.is-error { color: var(--color-text-danger); }

      &.is-success { color: var(--color-text-success); }

      + .note {
        margin-top: 0;
      }
    }
  }
  // stylelint-enable selector-no-qualifying-type

  //
  // Variants
  //

  &.required {
    dt label::after, // TODO: Deprecate
    .form-group-header label::after {
      // stylelint-disable-next-line primer/spacing
      padding-left: 5px;
      color: var(--color-text-danger);
      content: "*";
    }
  }

  // Form AJAX states
  //
  // Form fields that need feedback for AJAX loading, success
  // states and errored states.
  .success,
  .error,
  .indicator {
    display: none;
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
  }

  &.loading {
    opacity: 0.5;

    .indicator {
      display: inline;
    }

    .spinner {
      display: inline-block;
      vertical-align: middle;
    }
  }

  &.successful {
    .success {
      display: inline;
      color: var(--color-text-success);
    }
  }

  // Form validation
  //
  // Our inline errors

  &.successed,
  &.warn,
  &.errored {
    .success,
    .warning,
    .error {
      position: absolute;
      z-index: 10;
      display: block; // Show up in errored/warn state
      max-width: 450px; // Keep our long errors readable
      padding: $spacer-1 $spacer-2;
      margin: $spacer-2 0 0;
      font-size: $font-size-small;
      font-weight: $font-weight-normal;
      border-style: $border-style;
      border-width: $border-width;
      border-radius: $border-radius;

      &::after,
      &::before {
        position: absolute;
        bottom: 100%;
        left: 10px;
        z-index: 15;
        width: 0;
        height: 0;
        pointer-events: none;
        content: " ";
        // stylelint-disable-next-line primer/borders
        border: $border-style transparent;
      }

      &::after {
        // stylelint-disable-next-line primer/borders
        border-width: 5px;
      }

      &::before {
        // stylelint-disable-next-line primer/spacing
        margin-left: -1px;
        // stylelint-disable-next-line primer/borders
        border-width: 6px;
      }
    }
  }

  &.successed {
    .success {
      color: var(--color-input-tooltip-success-text);
      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--color-input-tooltip-success-bg), var(--color-input-tooltip-success-bg));
      border-color: var(--color-input-tooltip-success-border);

      &::after { border-bottom-color: var(--color-input-tooltip-success-bg); } // stylelint-disable-line primer/borders
      &::before { border-bottom-color: var(--color-input-tooltip-success-border); }
    }
  }

  &.warn {
    .form-control {
      border-color: var(--color-input-warning-border);
    }

    .warning {
      color: var(--color-input-tooltip-warning-text);
      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--color-input-tooltip-warning-bg), var(--color-input-tooltip-warning-bg));
      border-color: var(--color-input-tooltip-warning-border);

      &::after { border-bottom-color: var(--color-input-tooltip-warning-bg); } // stylelint-disable-line primer/borders
      &::before { border-bottom-color: var(--color-input-tooltip-warning-border); }
    }
  }

  &.errored {
    .form-control {
      border-color: var(--color-input-error-border);
    }

    label {
      color: var(--color-text-danger);
    }

    .error {
      color: var(--color-input-tooltip-error-text);
      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--color-input-tooltip-error-bg), var(--color-input-tooltip-error-bg));
      border-color: var(--color-input-tooltip-error-border);

      &::after { border-bottom-color: var(--color-input-tooltip-error-bg); } // stylelint-disable-line primer/borders
      &::before { border-bottom-color: var(--color-input-tooltip-error-border); }
    }
  }
}

// tooltip
.note {
  min-height: 17px;
  margin: $spacer-1 0 2px;
  font-size: $font-size-small;
  color: var(--color-text-secondary);

  .spinner {
    // stylelint-disable-next-line primer/spacing
    margin-right: 3px;
    vertical-align: middle;
  }
}