@import (reference) '../../variables/legacy-variables.less';
@import (reference) '../../variables/neptune-tokens.less';
@import (reference) '../mixins/_arrows.less';
@import (reference) '../mixins/_grid.less';
@import (reference) '../mixins/_forms.less';
@import (reference) '../mixins/_tab-focus.less';
@import (reference) '../mixins/_logical-properties.less';
@import (reference) '../core/_typography.less';

//
// Forms
// --------------------------------------------------

// Normalize non-controls
//
// Restyle and baseline non-control form elements.
form {
  margin-bottom: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
  // so we reset that to ensure it behaves more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359.
  min-width: 0;
}

legend {
  display: block;
  width: 100%;
}

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
  margin-bottom: var(--size-4);
}

label,
.secondary {
  color: var(--color-content-secondary);
  transition: color ease-in-out 0.15s;
  font-size: var(--font-size-14);
  line-height: 20px;
}

// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

// Override content-box in Normalize (* isn't specific enough)
input[type='search'] {
  box-sizing: border-box;
}

input[type='number'] {
  appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

// Position radios and checkboxes better
input[type='radio'],
input[type='checkbox'] {
  margin: 4px 0 0;
  margin-top: 1px;
  line-height: normal;
}

input[type='file'] {
  display: block;
}

// Make range inputs behave like textual form controls
input[type='range'] {
  display: block;
  width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for file, radio, and checkbox
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
  .tab-focus();
}

// Adjust output element
output {
  display: block;
  padding-top: (@padding-base-vertical + 1);
  font-size: var(--font-size-16);
  line-height: var(--line-height-control);
  color: var(--color-content-primary);
}

// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.form-control {
  display: block;
  width: 100%;
  color: var(--color-content-primary);
  background-color: var(--color-background-screen);
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid var(--color-interactive-secondary);
  transition: border-color ease-in-out 0.15s;
  font-size: var(--font-size-16);

  .input-size(
    var(--input-height-base),
    var(--input-padding),
    @input-border-radius
  );
  .np-text-body-large;

  // Remove iOS drop shadow
  background-clip: padding-box;

  // Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus(var(--color-interactive-accent-active));

  &::placeholder {
    color: var(--color-content-tertiary);
  }

  // Reset height for `textarea`s
  textarea& {
    height: 144px;
  }

  + .text-muted,
  + .text-primary,
  + .text-success,
  + .text-positive,
  + .text-info,
  + .text-warning,
  + .text-negative,
  + .text-danger {
    margin-top: @padding-base-vertical;
  }

  &:focus {
    border-color: var(--color-interactive-accent-active);
  }

  .np-theme-personal & {
    .form-control-focus(var(--color-interactive-primary));

    &:hover {
      border-color: var(--color-interactive-secondary-hover);
    }

    &:focus {
      border-color: var(--color-interactive-primary);
    }
  }
}

// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.

input[type='search'] {
  appearance: none;
}

// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848

@media screen and (min-device-pixel-ratio: 0) {
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  input[type='month'] {
    line-height: var(--input-height-base);

    &.input-sm,
    .input-group-sm & {
      line-height: var(--input-height-small);
    }

    &.input-lg,
    .input-group-lg & {
      line-height: calc(var(--input-height-large) - var(--line-height-body));
    }
  }
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: @form-group-margin-bottom;

  label {
    margin-bottom: 2px;
  }

  &:focus-within {
    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
    .control-label,
    > label {
      color: var(--color-content-primary);
    }
  }
}

.row-equal-height > [class*='col-'] > .form-group {
  width: 100%;
}

// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 0;
  // margin-bottom: (@padding-base-vertical * 1.5);

  label {
    min-height: var(--input-height-base);
    margin-bottom: 0;
    cursor: pointer;
  }
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: (@padding-base-vertical * 1.5);
}

.radio input[type='radio'],
.radio-inline input[type='radio'],
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'] {
  position: absolute;
  .margin(left, -20px);

  margin-top: 4px \9;
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  .padding(left, 20px);

  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;

  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  .margin(left, 10px); // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type='radio'],
input[type='checkbox'] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}

// hide native password reveal button for MS Edge
// docs: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
input[type="password"] {
  &::-ms-reveal {
    display: none;
  }
}

// These classes are used on elements with <label> descendants
.radio,
.checkbox {
  &-disabled,
  fieldset[disabled] & {
    label {
      cursor: @cursor-disabled;
    }
  }
}

// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.

.form-control-static {
  // Remove default margin from `p`
  margin-bottom: 0;
  min-height: calc(var(--line-height-control) * 2);
  color: var(--color-content-secondary);
  background-color: var(--color-background-neutral);
  border: 1px solid var(--color-interactive-secondary);
  border-radius: @input-border-radius;
  padding: var(--input-padding);

  &.input-lg,
  &.input-sm {
    .padding(left, 0);

    .padding(right, 0);
  }
}

// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

.input-sm {
  .input-size(
    @input-height-small;
    var(--input-padding-small);
    @input-border-radius-small
  );
  font-size: 14px;
  line-height: 24px;
  .np-text-body-default();
}

.form-group-sm,
.navbar {
  .form-control {
    height: @input-height-small;
    padding: var(--input-padding-small);
    font-size: var(--font-size-14);
    line-height: @input-line-height-small;
    border-radius: @input-border-radius-small;
  }

  select.form-control {
    height: @input-height-small;
    line-height: @input-height-small;
  }

  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }

  .form-control-static {
    height: @input-height-small;
    min-height: calc(var(--line-height-control) + @input-font-size-small);
    padding: var(--input-padding-small);
    font-size: var(--font-size-14);
    line-height: @input-line-height-small;
  }
}

.input-lg {
  .input-size(
    var(--input-height-large);
    var(--input-padding-large);
    @input-border-radius-large
  );
  .np-text-body-large;
}

.form-group-lg {
  position: relative;

  .input-lg,
  .input-group-lg > .form-control,
  .input-group-lg > .input-group-addon {
    height: var(--input-height-large);
    padding: calc(@padding-small-vertical + var(--size-24)) @padding-small-horizontal
      @padding-small-vertical;
    font-size: @input-font-size-large;
    line-height: @input-line-height-large;
  }

  select.form-control {
    line-height: var(--input-height-large);
  }

  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }

  .form-control-static {
    height: var(--input-height-large);
    min-height: calc(var(--line-height-control) + @input-font-size-large);
    padding: var(--input-padding-large);
    font-size: @input-font-size-large;
    line-height: @input-line-height-large;
  }

  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
  .control-label {
    position: absolute;
    top: 12px;
    .left(14px);

    margin-bottom: 0;
    z-index: 1;
  }
}

// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

.has-feedback {
  // Enable absolute positioning
  position: relative;

  // Ensure icons don't overlap text
  .form-control {
    .padding(right, var(--input-height-base));
  }
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
  position: absolute;
  top: 0;
  .right(0);

  z-index: 2; // Ensure icon is above input groups
  display: block;
  width: @input-height-base;
  height: @input-height-base;
  text-align: center;
  pointer-events: none;
}

.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: var(--input-height-large);
  height: var(--input-height-large);
}

.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: @input-height-small;
  height: @input-height-small;
}

// Focus state
.focus,
.has-focus {
  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
  .control-label {
    color: var(--color-content-primary);
  }

  .input-group-addon {
    border-color: var(--color-interactive-secondary);

    &:active {
      border-color: var(--color-interactive-secondary-active);
    }
  }
}

// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.help-block,
.error-messages {
  margin-top: 12px;
  margin-bottom: 4px;
  border-width: 0;
  border-style: solid;
  border-radius: var(--radius-small);
  padding: 4px 16px 3px;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;

  a {
    color: inherit;
  }
}

.help-block {
  color: var(--color-content-secondary);
  border-color: var(--color-interactive-secondary);
  background-color: var(--color-background-neutral);
  display: block;

  .arrow(10px);
}

.focus, // TODO legacy, remove.
.has-focus {
  .alert {
    border-color: var(--color-interactive-accent-active);
  }
}

// Feedback states
.has-success {
  .form-control-validation(
    var(--color-content-positive);
    var(--color-interactive-positive);
    var(--color-interactive-positive-hover);
  );

  .np-theme-personal & {
    .form-control-validation(
      var(--color-content-primary);
      var(--color-sentiment-positive);
      var(--color-sentiment-positive);
    );
  }
}

.has-info {
  .form-control-validation(
    var(--color-content-accent);
    var(--color-interactive-accent);
    var(--color-interactive-accent-hover);
  );

  .np-theme-personal & {
    .form-control-validation(
      var(--color-content-primary);
      transparent;
      transparent;
    );
  }
}

.has-warning {
  .form-control-validation(
    var(--color-content-warning);
    var(--color-interactive-warning);
    var(--color-interactive-warning-hover);
  );

  .np-theme-personal & {
    .form-control-validation(
      var(--color-content-primary);
      var(--color-sentiment-warning);
      var(--color-sentiment-warning);
    );
  }
}

.has-error {
  .form-control-validation(
    var(--color-content-negative);
    var(--color-interactive-negative);
    var(--color-interactive-negative-hover);
  );

  .np-theme-personal & {
    .form-control-validation(
      var(--color-content-primary);
      var(--color-sentiment-negative);
      var(--color-sentiment-negative-hover);
    );
  }
}

// Reposition feedback icon if input has visible label above
.has-feedback label {
  & ~ .form-control-feedback {
    top: var(--line-height-control); // Height of the `label` and its margin
  }

  &.sr-only ~ .form-control-feedback {
    top: 0;
  }
}

// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.

.form-inline {
  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
    .control-label {
      margin-bottom: 0;
      vertical-align: calc(-2px);
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        .padding(left, 0);
      }
    }

    .radio input[type='radio'],
    .checkbox input[type='checkbox'] {
      position: relative;
      .margin(left, 0);
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

.form-horizontal {
  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: calc(var(--line-height-control) + (@padding-base-vertical + 1));
  }

  // Make form groups behave like rows
  .form-group {
    .make-row();
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: @screen-sm-min) {
    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
    .control-label {
      .text-align(right);

      margin-bottom: 0;
      padding-top: 14px; // Default padding plus a border
    }
  }

  // Validation states
  //
  // Reposition the icon because it's now within a grid column and columns have
  // `position: relative;` on them. Also accounts for the grid gutter padding.
  .has-feedback .form-control-feedback {
    .right(floor((@grid-gutter-width / 2)));
  }

  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: @screen-sm-min) {
      // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
      .control-label {
        padding-top: 17px;
        font-size: var(--font-size-20);
      }
    }
  }

  .form-group-sm {
    @media (min-width: @screen-sm-min) {
      // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
      .control-label {
        padding-top: 8px;
        font-size: var(--font-size-14);
      }
    }
  }
}

@import 'checkbox-radio.less';

.input-group .input-group-btn + input {
  .border(left, 0, solid, transparent);
}

.input-group-addon {
  color: var(--color-content-secondary);
  transition: border-color ease-in-out 0.15s;
}

.form-control-feedback,
.form-control-feedback.icon {
  font-size: 24px;
  line-height: 48px;
}

.label {
  padding-top: 0.25em;
  position: relative;
  top: -3px;

  .label-default {
    color: var(--color-content-secondary);
    background-color: var(--color-background-neutral);
  }
}

.form-group {
  position: relative;
  font-size: var(--font-size-14);
}

.form-group .row {
  .margin(left, -6px);

  .margin(right, -6px);

  [class*='col-'] {
    .padding(left, 6px);

    .padding(right, 6px);
  }
}

@media (max-width: @screen-xs-max) {
  .form-group .row [class*='col-sm-'] {
    margin-bottom: 0;

    .btn-input {
      margin-bottom: (@padding-base-vertical * 1.5);
    }
  }
}

@media (max-width: @screen-sm-max) {
  .form-group .row [class*='col-md-'] {
    margin-bottom: 0;

    .form-control,
    .btn-input {
      margin-bottom: (@padding-base-vertical * 1.5);
    }
  }
}

@media (max-width: @screen-md-max) {
  .form-group .row [class*='col-lg-'] {
    margin-bottom: 0;

    .form-control,
    .btn-input {
      margin-bottom: (@padding-base-vertical * 1.5);
    }
  }
}

@media (max-width: @screen-lg-max) {
  .form-group .row [class*='col-xl-'] {
    margin-bottom: 0;

    .form-control,
    .btn-input {
      margin-bottom: (@padding-base-vertical * 1.5);
    }
  }
}

@media (min-width: @screen-sm-min) {
  fieldset .form-group:nth-of-type(odd) {
    .clear(left);
  }
}

.checkbox,
.radio {
  > label {
    display: block;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 10px;
    .padding(right, 16px);

    color: var(--color-content-primary);
    background-color: var(--color-background-screen);
    border: 1px solid var(--color-interactive-secondary);
    border-radius: @border-radius-base;
    transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;

    .np-theme-personal & {
      border-radius: var(--radius-small);
    }

    &:not(.disabled, :disabled):hover {
      border-color: var(--color-interactive-secondary-hover);
    }

    &:not(.disabled, :disabled).focus,
    &:not(.disabled, :disabled).focus:hover,
    &:not(.disabled, :disabled).has-focus,
    &:not(.disabled, :disabled).has-focus:hover,
    &:not(.disabled, :disabled):focus-within {
      border-color: var(--color-interactive-accent-active);

      .np-theme-personal & {
        border-color: var(--color-interactive-secondary);
      }
    }
  }

  &.checkbox-lg,
  &.radio-lg {
    > label {
      min-height: var(--size-72);

      small,
      .small,
      .body-2,
      .np-text-body-default {
        display: block;
        color: var(--color-content-secondary);
      }
    }
  }
}

.error-messages {
  display: none;
  color: var(--color-content-negative);
  background-color: var(--color-background-negative);
  position: relative;
  .arrow-pointer(@alert-arrow-width);

  .form-group & {
    border-radius: @border-radius-base;
    border-width: 0;
    margin-top: 12px;
  }

  .has-error & {
    display: block;

    &:empty,
    &:-moz-only-whitespace {
      display: none;

      &::before {
        display: none;
      }
    }
  }
}

.error-required,
.error-pattern,
.error-minlength,
.error-maxlength,
.error-min,
.error-max,
.error-async,
.error-number,
.error-date,
.error-time,
.error-datetime,
.error-email,
.error-url,
.error-week,
.error-month,
.error-datetimelocal {
  display: none;
}

.ng-invalid-required ~ .error-messages > .error-required,
.ng-invalid-pattern ~ .error-messages > .error-pattern,
.ng-invalid-minlength ~ .error-messages > .error-minlength,
.ng-invalid-maxlength ~ .error-messages > .error-maxlength,
.ng-invalid-min ~ .error-messages > .error-min,
.ng-invalid-max ~ .error-messages > .error-max,
.ng-invalid-async ~ .error-messages > .error-async,
.ng-invalid-number ~ .error-messages > .error-number,
.ng-invalid-date ~ .error-messages > .error-date,
.ng-invalid-time ~ .error-messages > .error-time,
.ng-invalid-datetime ~ .error-messages > .error-datetime,
.ng-invalid-email ~ .error-messages > .error-email,
.ng-invalid-url ~ .error-messages > .error-url,
.ng-invalid-week ~ .error-messages > .error-week,
.ng-invalid-month ~ .error-messages > .error-month,
.ng-invalid-datetimelocal ~ .error-messages > .error-datetimelocal {
  display: block;
}

.ng-invalid-required ~ .alert-danger > .error-required,
.ng-invalid-pattern ~ .alert-danger > .error-pattern,
.ng-invalid-minlength ~ .alert-danger > .error-minlength,
.ng-invalid-maxlength ~ .alert-danger > .error-maxlength,
.ng-invalid-min ~ .alert-danger > .error-min,
.ng-invalid-max ~ .alert-danger > .error-max,
.ng-invalid-async ~ .alert-danger > .error-async,
.ng-invalid-number ~ .alert-danger > .error-number,
.ng-invalid-date ~ .alert-danger > .error-date,
.ng-invalid-time ~ .alert-danger > .error-time,
.ng-invalid-datetime ~ .alert-danger > .error-datetime,
.ng-invalid-email ~ .alert-danger > .error-email,
.ng-invalid-url ~ .alert-danger > .error-url,
.ng-invalid-week ~ .alert-danger > .error-week,
.ng-invalid-month ~ .alert-danger > .error-month,
.ng-invalid-datetimelocal ~ .alert-danger > .error-datetimelocal {
  display: block;
}

.form-control-placeholder {
  text-overflow: ellipsis;
  overflow: hidden;
  .np-text-body-large;
  display: block;
  width: 100%;
  color: var(--color-content-tertiary);
}

.np-theme-personal {
  .btn-input,
  .input-group,
  .form-control,
  .input-group-addon,
  .radio > label,
  .checkbox > label {
    background-color: unset;
    border: none !important;
    border-radius: var(--radius-small);
  }

  .btn-input,
  .input-group,
  .form-control,
  .radio > label,
  .checkbox > label {
    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
    transition: box-shadow 0.3s ease-in-out;
  }

  .input-group > .form-control,
  .input-group > .btn-input,
  .typeahead__input-container .form-control {
    box-shadow: none !important;
  }

  .btn-input:not(.disabled, :disabled),
  .input-group:not(.disabled, :disabled),
  .form-control:not(.disabled, :disabled),
  .radio > label:not(.disabled, :disabled),
  .checkbox > label:not(.disabled, :disabled) {
    &:hover {
      box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
      &:has(:checked, .checked) {
        box-shadow: inset 0 0 0 2px var(--color-interactive-primary-hover);
      }
    }
  }

  .btn-input:not(.disabled, :disabled):focus-visible,
  .btn-input:not(.disabled, :disabled):has(:focus-visible),
  .input-group:not(.disabled, :disabled):focus-visible,
  .input-group:not(.disabled, :disabled):has(.form-control:focus-visible, .btn-input:focus-visible),
  .form-control:not(.disabled, :disabled):focus-visible,
  .form-control:not(.disabled, :disabled):has(:focus-visible),
  .radio > label:not(.disabled, :disabled):focus-visible,
  .radio > label:not(.disabled, :disabled):has(:focus-visible),
  .checkbox > label:not(.disabled, :disabled):focus-visible,
  .checkbox > label:not(.disabled, :disabled):has(:focus-visible) {
    box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
  }

  .has-error {
    .btn-input,
    .input-group,
    .form-control,
    .radio > label,
    .checkbox > label {
      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
    }

    .input-group:not(.disabled, :disabled):hover,
    .form-control:not(.disabled, :disabled):hover,
    .radio > label:not(.disabled, :disabled):hover,
    .checkbox > label:not(.disabled, :disabled):hover {
      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
    }

    .input-group:not(.disabled, :disabled):active,
    .input-group:not(.disabled, :disabled):focus-visible,
    .input-group:not(.disabled, :disabled):has(:focus-visible),
    .form-control:not(.disabled, :disabled):active,
    .form-control:not(.disabled, :disabled):focus-visible,
    .form-control:not(.disabled, :disabled):has(:focus-visible),
    .radio > label:not(.disabled, :disabled):active,
    .radio > label:not(.disabled, :disabled):focus-visible,
    .radio > label:not(.disabled, :disabled):has(:focus-visible),
    .checkbox > label:not(.disabled, :disabled):active,
    .checkbox > label:not(.disabled, :disabled):focus-visible,
    .checkbox > label:not(.disabled, :disabled):has(:focus-visible) {
      box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
    }

    .tw-radio-button {
      border-color: var(--color-sentiment-negative) !important;

      &.checked {
        box-shadow: inset 0 0 0 1px var(--color-sentiment-negative);
      }

      &.checked .tw-radio-check {
        background: var(--color-sentiment-negative) !important;
      }
    }

    .checkbox:hover .tw-checkbox-button,
    .radio:not(.disabled):hover .tw-radio-button,
    .tw-checkbox-button:not(.disabled,:disabled):hover,
    input[type=checkbox]:hover+.tw-checkbox-button,
    input[type=radio]:not(.disabled,:disabled):hover+.tw-radio-button,
    input[type=checkbox]:not(.disabled,:disabled):hover+.tw-checkbox-button {
      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
    }

    .tw-checkbox-button.checked,
    .tw-checkbox-button:checked,
    input[type=checkbox]:checked+.tw-checkbox-button,
    .tw-checkbox-button.checked:hover,
    .tw-checkbox-button:checked:hover,
    input[type=checkbox]:not(.disabled,:disabled):checked:hover+.tw-checkbox-button {
      box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
      background: var(--color-sentiment-negative);
    }

    .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button,
    .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button,
    .checkbox>label:not(.disabled,:disabled):has(:focus-visible) input[type=checkbox]+.tw-checkbox-button {
      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
    }
  }

  .tw-radio-button,
  .tw-checkbox-button {
    background-color: unset;
    color: unset;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  .btn-input:hover,
  .btn-input:active,
  .btn-input:focus,
  .btn-input:focus,
  .btn-input:focus-within,
  &.open .btn-input {
    background-color: unset !important;
  }

  .form-group label {
    margin-bottom: var(--padding-x-small);
  }

  .form-group .np-upload-input label {
      margin-bottom: 0;
  }

  .form-group .alert:before,
  .error-messages:before {
    content: none;
  }

  .error-messages,
  .alert-detach {
    color: var(--color-content-secondary);

    margin: var(--padding-x-small) 0;
    padding: 0;
    background-color: unset;
  }

  .alert-detach {
    .status-circle {
      margin-top: 2px;
      margin-right: var(--size-4);
    }
  }

  .has-error .error-messages,
  .has-error .alert-detach.alert-danger {
    color: var(--color-sentiment-negative);
  }

  .has-success .alert-detach.alert-positive,
  .has-warning .alert-detach.alert-warning,
  .has-error .alert-detach.alert-danger {
    display: flex;
  }
}

.has-required {
  &::after {
    content: "\00a0*";
    color: var(--color-content-negative);

    .np-theme-personal & {
      color: var(--color-sentiment-negative);
    }
  }
}