@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

package/src/neptune-css/less/forms/bootstrap-forms.less

@@ -1,1218 +0,0 @@
-@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);
-    }
-  }
-}