@skyscanner/backpack-web 26.0.0 → 28.0.0

package/bpk-mixins/src/mixins/_forms.scss

@@ -0,0 +1,1043 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../bonds.scss';
+
+////
+/// @group forms
+////
+
+/// Form input. Can be used for text, email, number, password and tel type inputs.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///   }
+
+@mixin bpk-input {
+  display: inline-block;
+  width: 100%;
+  height: $bpk-input-height;
+  padding: $bpk-input-padding-y $bpk-input-padding-x;
+  border: $bpk-input-border;
+  border-radius: $bpk-input-border-radius;
+  background: $bpk-input-background;
+  color: $bpk-text-primary-day;
+  appearance: none;
+
+  &::placeholder {
+    color: $bpk-text-secondary-day;
+  }
+
+  &:disabled {
+    border-color: $bpk-input-disabled-border-color;
+    background: $bpk-input-background;
+    color: $bpk-input-disabled-color;
+    cursor: not-allowed;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield; // stylelint-disable property-no-vendor-prefix
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+    }
+  }
+
+  &[type='number'],
+  &[type='tel'],
+  &[type='email'] {
+    @include bpk-rtl {
+      text-align: right;
+      direction: ltr;
+    }
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+/// Valid form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--valid();
+///   }
+
+@mixin bpk-input--valid {
+  padding-right: bpk-spacing-xl();
+  background: $bpk-input-background
+    url(map-get($bpk-icons-sm, tick-circle-green-spot)) no-repeat right
+    bpk-spacing-md() center;
+  background-size: $bpk-icon-size-sm $bpk-icon-size-sm;
+
+  @include bpk-rtl {
+    padding-right: $bpk-input-padding-x;
+    padding-left: bpk-spacing-xl();
+    background-position: left bpk-spacing-md() center;
+  }
+}
+
+/// Invalid form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--invalid();
+///   }
+
+@mixin bpk-input--invalid {
+  padding-right: bpk-spacing-xl();
+  background: $bpk-input-background
+    url(map-get($bpk-icons-sm, exclamation-circle-berry)) no-repeat right
+    bpk-spacing-md() center;
+  background-size: $bpk-icon-size-sm $bpk-icon-size-sm;
+
+  @include bpk-themeable-property(
+    border-color,
+    --bpk-input-invalid-border-color,
+    $bpk-form-validation-color
+  );
+
+  @include bpk-rtl {
+    padding-right: $bpk-input-padding-x;
+    padding-left: bpk-spacing-xl();
+    background-position: left bpk-spacing-md() center;
+  }
+}
+
+/// Clearable form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--clearable();
+///   }
+
+@mixin bpk-input--clearable {
+  padding-right: bpk-spacing-xl();
+
+  @include bpk-rtl {
+    padding-right: $bpk-input-padding-x;
+    padding-left: bpk-spacing-xl();
+  }
+
+  &:focus {
+    background: $bpk-input-background;
+  }
+}
+
+/// Clearable form input container. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input__container();
+///   }
+
+@mixin bpk-input__container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+/// Clearable (clear button) form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input__clear-button();
+///   }
+
+@mixin bpk-input__clear-button {
+  position: absolute;
+  right: bpk-spacing-md();
+  height: $bpk-input-height;
+
+  @include bpk-rtl {
+    right: inherit;
+    left: bpk-spacing-md();
+  }
+
+  &--large {
+    right: bpk-spacing-base();
+    height: $bpk-input-large-height;
+
+    @include bpk-rtl {
+      left: bpk-spacing-base();
+    }
+  }
+}
+
+/// Large form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--large();
+///   }
+
+@mixin bpk-input--large {
+  height: $bpk-input-large-height;
+  padding-right: bpk-spacing-base();
+  padding-left: bpk-spacing-base();
+
+  &.bpk-input--valid,
+  &.bpk-input--invalid,
+  &.bpk-input--clearable {
+    padding-right: bpk-spacing-xxl();
+    background-position: right bpk-spacing-base() center;
+
+    @include bpk-rtl {
+      padding-right: bpk-spacing-base();
+      padding-left: bpk-spacing-xxl();
+      background-position: left bpk-spacing-base() center;
+    }
+  }
+}
+
+/// Docked (first-child) form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--docked-first-child();
+///   }
+
+@mixin bpk-input--docked-first-child {
+  border-right-width: 0;
+  border-radius: $bpk-input-border-radius 0 0 $bpk-input-border-radius;
+
+  @include bpk-rtl {
+    border-right-width: $bpk-input-border-width;
+    border-left-width: 0;
+    border-radius: 0 $bpk-input-border-radius $bpk-input-border-radius 0;
+  }
+
+  &:focus {
+    position: relative; // brings outline to the front
+  }
+}
+
+/// Docked (last-child) form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--docked-last-child();
+///   }
+
+@mixin bpk-input--docked-last-child {
+  border-radius: 0 $bpk-input-border-radius $bpk-input-border-radius 0;
+
+  @include bpk-rtl {
+    border-radius: $bpk-input-border-radius 0 0 $bpk-input-border-radius;
+  }
+
+  &:focus {
+    position: relative; // brings outline to the front
+  }
+}
+
+/// Docked (middle-child) form input. Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--docked-middle-child();
+///   }
+
+@mixin bpk-input--docked-middle-child {
+  border-right-width: 0;
+  border-radius: 0;
+
+  @include bpk-rtl {
+    border-right-width: $bpk-input-border-width;
+    border-left-width: 0;
+  }
+
+  &:focus {
+    position: relative; // brings outline to the front
+  }
+}
+
+/// Docked form input (inputs must sit side-by-side in the DOM). Modifies the bpk-input mixin.
+///
+/// @require {mixin} bpk-input
+///
+/// @example scss
+///   .selector {
+///     @include bpk-input();
+///     @include bpk-input--docked();
+///   }
+
+@mixin bpk-input--docked {
+  &:first-child {
+    @include bpk-input--docked-first-child;
+  }
+
+  &:last-child {
+    @include bpk-input--docked-last-child;
+  }
+
+  &:not(:first-child):not(:last-child) {
+    @include bpk-input--docked-middle-child;
+  }
+}
+
+/// Form select input.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///   }
+
+@mixin bpk-select {
+  display: inline-block;
+  width: 100%;
+  height: $bpk-input-height;
+  padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) bpk-spacing-md();
+  padding-right: bpk-spacing-xl();
+  border: solid $bpk-one-pixel-rem $bpk-line-day;
+  border-radius: $bpk-select-border-radius;
+  background: $bpk-surface-default-day
+    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
+    bpk-spacing-md() center;
+  background-size: $bpk-input-height / 2;
+  color: $bpk-text-primary-day;
+  line-height: ($bpk-line-height-base - (2 * $bpk-select-border-width));
+  appearance: none;
+
+  @include bpk-rtl {
+    padding-right: bpk-spacing-md();
+    padding-left: bpk-spacing-xl();
+    background-position: left bpk-spacing-md() center;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    padding: bpk-spacing-md() !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    background-image: none !important;
+  }
+
+  &:disabled {
+    border-color: $bpk-surface-highlight-day;
+    background: $bpk-surface-default-day
+      url(map-get($bpk-icons-sm, arrow-down-black-alpha-20)) no-repeat right
+      bpk-spacing-md() center;
+    background-size: $bpk-input-height / 2;
+    color: $bpk-text-disabled-day;
+    cursor: not-allowed;
+  }
+}
+
+/// Large form select input. Modifies the bpk-select mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--large();
+///   }
+
+@mixin bpk-select--large {
+  height: $bpk-input-large-height;
+  padding: bpk-spacing-md() bpk-spacing-base();
+  padding-right: bpk-spacing-xxl();
+  background: $bpk-surface-default-day
+    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
+    bpk-spacing-base() center;
+
+  @include bpk-rtl {
+    padding-right: bpk-spacing-base();
+    padding-left: bpk-spacing-xxl();
+    background-position: left bpk-spacing-base() center;
+  }
+}
+
+/// Docked (first-child) form select input. Modifies the bpk-select mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--docked-first-child();
+///   }
+
+@mixin bpk-select--docked-first-child {
+  border-right-width: 0;
+  border-radius: $bpk-select-border-radius 0 0 $bpk-select-border-radius;
+
+  @include bpk-rtl {
+    border-right-width: $bpk-select-border-width;
+    border-left-width: 0;
+    border-radius: 0 $bpk-select-border-radius $bpk-select-border-radius 0;
+  }
+}
+
+/// Docked (last-child) form select input. Modifies the bpk-select mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--docked-last-child();
+///   }
+
+@mixin bpk-select--docked-last-child {
+  border-radius: 0 $bpk-select-border-radius $bpk-select-border-radius 0;
+
+  @include bpk-rtl {
+    border-radius: $bpk-select-border-radius 0 0 $bpk-select-border-radius;
+  }
+}
+
+/// Docked (middle-child) form select input. Modifies the bpk-select mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--docked-middle-child();
+///   }
+
+@mixin bpk-select--docked-middle-child {
+  border-right-width: 0;
+  border-radius: 0;
+
+  @include bpk-rtl {
+    border-right-width: $bpk-select-border-width;
+    border-left-width: 0;
+  }
+}
+
+/// Docked form select input (selects must sit side-by-side in the DOM). Modifies the bpk-select mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--docked();
+///   }
+
+@mixin bpk-select--docked {
+  &:first-child {
+    @include bpk-select--docked-first-child;
+  }
+
+  &:last-child {
+    @include bpk-select--docked-last-child;
+  }
+
+  &:not(:first-child):not(:last-child) {
+    @include bpk-select--docked-middle-child;
+  }
+}
+
+/// Invalid form input. Modifies the bpk-selct mixin.
+///
+/// @require {mixin} bpk-select
+///
+/// @example scss
+///   .selector {
+///     @include bpk-select();
+///     @include bpk-select--invalid();
+///   }
+
+@mixin bpk-select--invalid {
+  padding-right: bpk-spacing-xl();
+  background: $bpk-surface-default-day
+    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
+    bpk-spacing-md() center;
+  background-size: $bpk-input-height / 2;
+
+  @include bpk-themeable-property(
+    border-color,
+    --bpk-select-invalid-border-color,
+    $bpk-form-validation-color
+  );
+
+  @include bpk-rtl {
+    padding-right: bpk-spacing-md();
+    padding-left: bpk-spacing-xl();
+    background-position: left bpk-spacing-md() center;
+  }
+}
+
+/// Form checkbox. Should be applied to containing label element.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox();
+///   }
+
+@mixin bpk-checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: bpk-spacing-lg() + bpk-spacing-sm();
+
+  @include bpk-text;
+  @include bpk-body-default;
+
+  @include bpk-rtl {
+    padding-right: bpk-spacing-lg() + bpk-spacing-sm();
+    padding-left: 0;
+  }
+}
+
+/// Label for checkbox. Should be applied to label text element.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox__label();
+///   }
+
+@mixin bpk-checkbox__label {
+  vertical-align: baseline;
+}
+
+/// Small label for checkbox. Should be applied to label text element.
+/// Modifies bpk-checkbox__label.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox__label();
+///     @include bpk-checkbox__label--small();
+///   }
+
+@mixin bpk-checkbox__label--small {
+  @include bpk-text;
+  @include bpk-caption;
+}
+
+/// White label checkbox. Modifies the bpk-checkbox mixin.
+///
+/// @require {mixin} bpk-checkbox
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox();
+///     @include bpk-checkbox--white();
+///   }
+
+@mixin bpk-checkbox--white {
+  color: $bpk-surface-default-day;
+}
+
+/// Disabled form checkbox. Modifies the bpk-checkbox mixin.
+///
+/// @require {mixin} bpk-checkbox
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox();
+///     @include bpk-checkbox--disabled();
+///   }
+
+@mixin bpk-checkbox--disabled {
+  color: $bpk-label-disabled-color;
+  cursor: not-allowed;
+}
+
+/// Invalid form checkbox. Modifies the bpk-checkbox mixin.
+///
+/// @require {mixin} bpk-checkbox
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox();
+///     @include bpk-checkbox--invalid();
+///   }
+
+@mixin bpk-checkbox--invalid {
+  input[type='checkbox'] {
+    border: ($bpk-one-pixel-rem * 3) solid $bpk-text-error-day;
+  }
+}
+
+/// Used to create the check/tick inside
+/// a checked checkbox.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox__checkmark();
+///   }
+@mixin bpk-checkbox__checkmark {
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    transform: rotate(45deg);
+    border-radius: $bpk-border-size-lg;
+    background-color: $bpk-text-primary-inverse-day;
+  }
+
+  &::before {
+    top: bpk-spacing-md() - $bpk-one-pixel-rem;
+    left: 0;
+    width: bpk-spacing-lg() / 3;
+    height: bpk-spacing-sm() - $bpk-one-pixel-rem;
+  }
+
+  &::after {
+    top: bpk-spacing-sm() / 2;
+    left: bpk-spacing-md() - $bpk-one-pixel-rem;
+    width: bpk-spacing-sm() - $bpk-one-pixel-rem;
+    height: bpk-spacing-md() + ($bpk-one-pixel-rem * 3);
+  }
+
+  &:disabled {
+    &::before,
+    &::after {
+      background-color: $bpk-text-disabled-day;
+    }
+  }
+}
+
+/// Form checkbox input.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox__input();
+///   }
+
+@mixin bpk-checkbox__input {
+  $checkbox-input-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
+
+  position: absolute;
+  top: ($bpk-line-height-base - $checkbox-input-size) / 2;
+  left: 0;
+  width: $checkbox-input-size;
+  height: $checkbox-input-size;
+  margin: 0;
+  padding: 0;
+  border: ($bpk-one-pixel-rem * 3) solid $bpk-text-secondary-day;
+  border-radius: ($bpk-one-pixel-rem * 4);
+  cursor: pointer;
+  vertical-align: text-bottom;
+  appearance: none;
+
+  @include bpk-rtl {
+    right: 0;
+    left: auto;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+  }
+
+  &:checked,
+  &:indeterminate {
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-checkbox-checked-color,
+      $bpk-core-accent-day
+    );
+    @include bpk-themeable-property(
+      border-color,
+      --bpk-checkbox-checked-color,
+      $bpk-core-accent-day
+    );
+
+    &:disabled {
+      border-color: $bpk-text-disabled-day;
+      background: none;
+    }
+  }
+
+  &:checked:not(:indeterminate) {
+    @include bpk-checkbox__checkmark;
+  }
+
+  &:disabled {
+    border-color: $bpk-text-disabled-day;
+  }
+}
+
+/// Form radio button mixin. This is a reusable mixin to set border styles for the radio button.
+///
+/// @param {variable} $color
+///
+/// @access private
+@mixin _bpk-radio-border($color) {
+  border: $bpk-border-size-xl solid $color;
+  border-radius: $bpk-border-radius-lg;
+}
+
+/// Form radio button. Should be applied to containing label element.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio();
+///   }
+
+@mixin bpk-radio {
+  position: relative;
+  display: inline-block;
+  padding-left: bpk-spacing-lg() + bpk-spacing-sm();
+
+  @include bpk-rtl {
+    padding-right: bpk-spacing-lg() + bpk-spacing-sm();
+    padding-left: 0;
+  }
+}
+
+/// Disabled form radio button. Modifies the bpk-radio mixin.
+///
+/// @require {mixin} bpk-radio
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio();
+///     @include bpk-radio--disabled();
+///   }
+
+@mixin bpk-radio--disabled {
+  color: $bpk-label-disabled-color;
+  cursor: not-allowed;
+}
+
+/// White label radio button. Modifies the bpk-radio mixin.
+///
+/// @require {mixin} bpk-radio
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio();
+///     @include bpk-radio--white();
+///   }
+
+@mixin bpk-radio--white {
+  color: $bpk-text-primary-inverse-day;
+
+  input[type='radio'] {
+    background: $bpk-text-primary-inverse-day;
+  }
+}
+
+/// Invalid radio button. Modifies the bpk-radio mixin.
+///
+/// @require {mixin} bpk-radio
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio();
+///     @include bpk-radio--invalid();
+///   }
+
+@mixin bpk-radio--invalid {
+  input[type='radio'] {
+    @include _bpk-radio-border($bpk-text-error-day);
+  }
+}
+
+/// Form radio input.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio__input();
+///   }
+
+@mixin bpk-radio__input {
+  $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $bpk-radio-size;
+  height: $bpk-radio-size;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  vertical-align: text-bottom;
+  appearance: none;
+
+  @include _bpk-radio-border($bpk-text-secondary-day);
+
+  @include bpk-rtl {
+    right: 0;
+    left: auto;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+  }
+
+  &:checked {
+    @include bpk-themeable-property(
+      border-color,
+      --bpk-radio-checked-color,
+      $bpk-core-accent-day
+    );
+
+    &:disabled {
+      border-color: $bpk-text-disabled-day;
+    }
+  }
+
+  &:disabled {
+    border-color: $bpk-text-disabled-day;
+  }
+}
+
+/// Form label.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-label();
+///   }
+
+@mixin bpk-label {
+  display: block;
+  color: $bpk-text-primary-day;
+  font-size: $bpk-font-size-xs;
+  font-weight: $bpk-font-weight-bold;
+  line-height: $bpk-line-height-xs;
+}
+
+/// Invalid form label. Modifies the bpk-label mixin.
+///
+/// @require {mixin} bpk-label
+///
+/// @example scss
+///   .selector {
+///     @include bpk-label();
+///     @include bpk-label--invalid();
+///   }
+
+@mixin bpk-label--invalid {
+  @include bpk-themeable-property(
+    color,
+    --bpk-form-validation-text-color,
+    $bpk-form-validation-color
+  );
+}
+
+/// White form label. Modifies the bpk-label mixin.
+///
+/// @require {mixin} bpk-label
+///
+/// @example scss
+///   .selector {
+///     @include bpk-label();
+///     @include bpk-label--white();
+///   }
+
+@mixin bpk-label--white {
+  color: $bpk-color-white;
+}
+
+/// Disabled form label. Modifies the bpk-label mixin.
+///
+/// @require {mixin} bpk-label
+///
+/// @example scss
+///   .selector {
+///     @include bpk-label();
+///     @include bpk-label--disabled();
+///   }
+
+@mixin bpk-label--disabled {
+  color: $bpk-label-disabled-color;
+  cursor: not-allowed;
+}
+
+/// Form validation.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-form-validation();
+///   }
+
+@mixin bpk-form-validation {
+  position: relative;
+  transform: translateY(-#{bpk-spacing-base()});
+  transition:
+    opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  opacity: 0;
+
+  @include bpk-themeable-property(
+    color,
+    --bpk-form-validation-text-color,
+    $bpk-form-validation-color
+  );
+}
+
+/// Form validation transition state. Modifies the bpk-form-validation mixin.
+///
+/// @require {mixin} bpk-form-validation
+///
+/// @example scss
+///   .selector {
+///     @include bpk-form-validation();
+///
+///     &--appear {
+///       @include bpk-form-validation--appear();
+///     }
+///   }
+
+@mixin bpk-form-validation--appear {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/// Checkbox form validation. Modifies the bpk-form-validation mixin.
+///
+/// @require {mixin} bpk-form-validation
+///
+/// @example scss
+///   .selector {
+///     @include bpk-form-validation();
+///
+///     &--is-checkbox {
+///       @include bpk-form-validation--is-checkbox();
+///     }
+///   }
+
+@mixin bpk-form-validation--is-checkbox {
+  display: inline-block;
+}
+
+/// Form validation container.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-form-validation__container();
+///   }
+
+@mixin bpk-form-validation__container {
+  margin-top: bpk-spacing-md();
+  font-size: $bpk-font-size-xs;
+}
+
+/// Form textarea.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-textarea();
+///   }
+
+@mixin bpk-textarea {
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  min-height: bpk-spacing-md() * 11;
+  padding: $bpk-input-padding-y $bpk-input-padding-x;
+  border: $bpk-input-border;
+  border-radius: $bpk-input-border-radius;
+  background: $bpk-input-background;
+  color: $bpk-text-primary-day;
+  appearance: none;
+
+  &::placeholder {
+    color: $bpk-text-secondary-day;
+  }
+
+  &:disabled {
+    border-color: $bpk-input-disabled-border-color;
+    background: $bpk-input-background;
+    color: $bpk-input-disabled-color;
+    cursor: not-allowed;
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+/// Invalid form input. Modifies the bpk-textarea mixin.
+///
+/// @require {mixin} bpk-textarea
+///
+/// @example scss
+///   .selector {
+///     @include bpk-textarea();
+///     @include bpk-textarea--invalid();
+///   }
+
+@mixin bpk-textarea--invalid {
+  padding-right: bpk-spacing-xl();
+  background: $bpk-input-background
+    url(map-get($bpk-icons-sm, exclamation-circle-berry)) no-repeat right
+    bpk-spacing-md() center;
+
+  @include bpk-themeable-property(
+    border-color,
+    --bpk-textarea-invalid-border-color,
+    $bpk-form-validation-color
+  );
+
+  @include bpk-rtl {
+    padding-right: $bpk-input-padding-x;
+    padding-left: bpk-spacing-xl();
+    background-position: left bpk-spacing-md() center;
+
+    &.bpk-textarea--large {
+      padding-right: bpk-spacing-base();
+      padding-left: bpk-spacing-xxl();
+      background-position: right bpk-spacing-base() center;
+    }
+  }
+}
+
+@mixin bpk-textarea--large {
+  min-height: 6 * bpk-spacing-base();
+  padding-right: bpk-spacing-base();
+  padding-left: bpk-spacing-base();
+
+  &.bpk-textarea--invalid {
+    padding-right: bpk-spacing-xxl();
+    background-position: right bpk-spacing-base() center;
+
+    @include bpk-rtl {
+      padding-right: bpk-spacing-base();
+      padding-left: bpk-spacing-xxl();
+      background-position: left bpk-spacing-base() center;
+    }
+  }
+}