$form-box-shadow-error: 0 0 0 2px #f73f43;
/* forms */

.form-control,
select {
  &.ng-invalid:not(.ng-untouched) {
    box-shadow: $form-box-shadow-error;

    &:focus {
      border-color: $luci-border-component-on-light-color;
      background: #fff;
    }
  }
}

label,
legend {
  &.form-label {
    font-size: 16px;
    color: $luci-text-color-secondary-on-light;
    font-size: $luci-font-size-xs;
    font-weight: $luci-font-weight-regular;
    text-transform: uppercase;
    margin: $luci-space-stack-xs;
    /* When we are inside a form-inline, no bottom margin */
    .form-inline & {
      margin-bottom: 0;
    }
  }
}

small.form-text.text-muted {
  font-size: $luci-font-size-sm;
}

//I do this because I want it to show / we ngIf it.
.invalid-feedback {
  display: inherit !important;
  font-size: $luci-font-size-sm;
  font-weight: $luci-font-weight-semi-bold;
  color: $luci-feedback-color-error-primary;
}

/* Progressive disclosure spacing */
.nwf-form-conditiona-container,
.nwf-form-conditional-container {
  padding: $luci-space-xs $luci-space-md $luci-space-md 70px;

  .nwf-form-conditiona-container,
  .nwf-form-conditional-container {
    padding-left: 34px;
  }
}

/* add a generic is-invalid class since we validate other form-things like groups */

.is-invalid {
  border: 1px solid $form-feedback-invalid-color !important;
}

fieldset {
  margin-top: rem($luci-space-xl);
  padding-bottom: rem($luci-space-xl);
  position: relative;

  &::before {
    background: $luci-border-component-on-light-color;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: rem(-$luci-space-xl);
    width: 100%;
    /* I have to double this in ff, which I target with this new supports */
    @supports (-moz-appearance: none) {
      top: rem(-$luci-space-xl * 2.3);
    }
  }

  &:first-child,
  > fieldset {
    margin-top: 0;

    &::before {
      display: none;
    }
  }

  > fieldset {
    padding-bottom: 0;
  }
}

/* I hide fieldset borders in safari because I can't get them right - this css rule targets modern Safari */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .fieldset::before {
      display: none !important;
    }
  }
}

legend {
  display: table-row;
}

.nwf-legend-title {
  display: table-cell;
  white-space: nowrap;
}

.nwf-legend-actions {
  display: table-cell;
  text-align: right;
  width: 100%;
  font-size: $luci-font-size-md;
}

.form-control-typeahead {
  &.open {
    background: $custom-select-background;
    color: $input-focus-color;
    background-color: $input-focus-bg;
    border-color: $input-focus-border-color;
  }
}

// we override the text color of typeahead result set.
// default color is set to dropdown-link-color, but in
// this case they are not links and hence should have text color.
ngb-typeahead-window {
  &.dropdown-menu {
    width: 100%;
    max-width: 700px;
  }

  .dropdown-item {
    &:hover {
      text-decoration: none;
    }

    &.active:hover,
    &.active {
      background-color: $luci-interactive-color-hover;
      color: $luci-text-color-primary-on-dark;
    }

    &.active:active {
      background-color: $luci-interactive-color-active;
    }
  }
}