@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/forms/bootstrap-forms.less

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