// 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;
}

}