@skyscanner/backpack-web 31.10.1 → 32.0.0

package/unstable__bpk-mixins/_forms.scss

@@ -0,0 +1,1049 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use "sass:math";
+
+@use 'tokens.scss';
+@use 'typography.scss';
+@use 'utils.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: tokens.$bpk-input-height;
+  padding: tokens.$bpk-input-padding-y tokens.$bpk-input-padding-x;
+  border: tokens.$bpk-input-border;
+  border-radius: tokens.$bpk-input-border-radius;
+  background: tokens.$bpk-input-background;
+  color: tokens.$bpk-text-primary-day;
+  appearance: none;
+
+  &::placeholder {
+    color: tokens.$bpk-text-secondary-day;
+  }
+
+  &:disabled {
+    border-color: tokens.$bpk-input-disabled-border-color;
+    background: tokens.$bpk-input-background;
+    color: tokens.$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 utils.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: tokens.bpk-spacing-xl();
+  background: tokens.$bpk-input-background
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=')
+    no-repeat right tokens.bpk-spacing-md() center;
+  background-size: tokens.$bpk-icon-size-sm tokens.$bpk-icon-size-sm;
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.$bpk-input-padding-x;
+    padding-left: tokens.bpk-spacing-xl();
+    background-position: left tokens.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: tokens.bpk-spacing-xl();
+  background: tokens.$bpk-input-background
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
+    no-repeat right tokens.bpk-spacing-md() center;
+  background-size: tokens.$bpk-icon-size-sm tokens.$bpk-icon-size-sm;
+
+  @include utils.bpk-themeable-property(
+    border-color,
+    --bpk-input-invalid-border-color,
+    tokens.$bpk-form-validation-color
+  );
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.$bpk-input-padding-x;
+    padding-left: tokens.bpk-spacing-xl();
+    background-position: left tokens.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: tokens.bpk-spacing-xl();
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.$bpk-input-padding-x;
+    padding-left: tokens.bpk-spacing-xl();
+  }
+
+  &:focus {
+    background: tokens.$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: tokens.bpk-spacing-md();
+  height: tokens.$bpk-input-height;
+
+  @include utils.bpk-rtl {
+    right: inherit;
+    left: tokens.bpk-spacing-md();
+  }
+
+  &--large {
+    right: tokens.bpk-spacing-base();
+    height: tokens.$bpk-input-large-height;
+
+    @include utils.bpk-rtl {
+      left: tokens.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: tokens.$bpk-input-large-height;
+  padding-right: tokens.bpk-spacing-base();
+  padding-left: tokens.bpk-spacing-base();
+
+  &.bpk-input--valid,
+  &.bpk-input--invalid,
+  &.bpk-input--clearable {
+    padding-right: tokens.bpk-spacing-xxl();
+    background-position: right tokens.bpk-spacing-base() center;
+
+    @include utils.bpk-rtl {
+      padding-right: tokens.bpk-spacing-base();
+      padding-left: tokens.bpk-spacing-xxl();
+      background-position: left tokens.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: tokens.$bpk-input-border-radius 0 0 tokens.$bpk-input-border-radius;
+
+  @include utils.bpk-rtl {
+    border-right-width: tokens.$bpk-input-border-width;
+    border-left-width: 0;
+    border-radius: 0 tokens.$bpk-input-border-radius tokens.$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 tokens.$bpk-input-border-radius tokens.$bpk-input-border-radius 0;
+
+  @include utils.bpk-rtl {
+    border-radius: tokens.$bpk-input-border-radius 0 0 tokens.$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 utils.bpk-rtl {
+    border-right-width: tokens.$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: tokens.$bpk-input-height;
+  padding: tokens.bpk-spacing-md() - (2 * tokens.$bpk-one-pixel-rem) tokens.bpk-spacing-md();
+  padding-right: tokens.bpk-spacing-xl();
+  border: solid tokens.$bpk-one-pixel-rem tokens.$bpk-line-day;
+  border-radius: tokens.$bpk-select-border-radius;
+  background: tokens.$bpk-surface-default-day
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right tokens.bpk-spacing-md() center;
+  background-size: tokens.$bpk-input-height * 0.5;
+  color: tokens.$bpk-text-primary-day;
+  line-height: (tokens.$bpk-line-height-base - (2 * tokens.$bpk-select-border-width));
+  appearance: none;
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.bpk-spacing-md();
+    padding-left: tokens.bpk-spacing-xl();
+    background-position: left tokens.bpk-spacing-md() center;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    padding: tokens.bpk-spacing-md() !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    background-image: none !important;
+  }
+
+  &:disabled {
+    border-color: tokens.$bpk-surface-highlight-day;
+    background: tokens.$bpk-surface-default-day
+      url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+      no-repeat right tokens.bpk-spacing-md() center;
+    background-size: tokens.$bpk-input-height * 0.5;
+    color: tokens.$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: tokens.$bpk-input-large-height;
+  padding: tokens.bpk-spacing-md() tokens.bpk-spacing-base();
+  padding-right: tokens.bpk-spacing-xxl();
+  background: tokens.$bpk-surface-default-day
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right tokens.bpk-spacing-base() center;
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.bpk-spacing-base();
+    padding-left: tokens.bpk-spacing-xxl();
+    background-position: left tokens.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: tokens.$bpk-select-border-radius 0 0 tokens.$bpk-select-border-radius;
+
+  @include utils.bpk-rtl {
+    border-right-width: tokens.$bpk-select-border-width;
+    border-left-width: 0;
+    border-radius: 0 tokens.$bpk-select-border-radius tokens.$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 tokens.$bpk-select-border-radius tokens.$bpk-select-border-radius 0;
+
+  @include utils.bpk-rtl {
+    border-radius: tokens.$bpk-select-border-radius 0 0 tokens.$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 utils.bpk-rtl {
+    border-right-width: tokens.$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: tokens.bpk-spacing-xl();
+  background: tokens.$bpk-surface-default-day
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right tokens.bpk-spacing-md() center;
+  background-size: tokens.$bpk-input-height * 0.5;
+
+  @include utils.bpk-themeable-property(
+    border-color,
+    --bpk-select-invalid-border-color,
+    tokens.$bpk-form-validation-color
+  );
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.bpk-spacing-md();
+    padding-left: tokens.bpk-spacing-xl();
+    background-position: left tokens.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: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm();
+
+  @include typography.bpk-text;
+  @include typography.bpk-body-default;
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.bpk-spacing-lg() + tokens.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 typography.bpk-text;
+  @include typography.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: tokens.$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: tokens.$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: (tokens.$bpk-one-pixel-rem * 3) solid tokens.$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: tokens.$bpk-border-size-lg;
+    background-color: tokens.$bpk-text-primary-inverse-day;
+  }
+
+  &::before {
+    top: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
+    left: 0;
+    width: math.div(tokens.bpk-spacing-lg(), 3);
+    height: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
+  }
+
+  &::after {
+    top: tokens.bpk-spacing-sm() * 0.5;
+    left: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
+    width: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
+    height: tokens.bpk-spacing-md() + (tokens.$bpk-one-pixel-rem * 3);
+  }
+
+  &:disabled {
+    &::before,
+    &::after {
+      background-color: tokens.$bpk-text-disabled-day;
+    }
+  }
+}
+
+/// Form checkbox input.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-checkbox__input();
+///   }
+
+@mixin bpk-checkbox__input {
+  $checkbox-input-size: tokens.bpk-spacing-lg() - (tokens.$bpk-one-pixel-rem * 4);
+
+  position: absolute;
+  top: (tokens.$bpk-line-height-base - $checkbox-input-size) * 0.5;
+  left: 0;
+  width: $checkbox-input-size;
+  height: $checkbox-input-size;
+  margin: 0;
+  padding: 0;
+  border: (tokens.$bpk-one-pixel-rem * 3) solid tokens.$bpk-text-secondary-day;
+  border-radius: (tokens.$bpk-one-pixel-rem * 4);
+  cursor: pointer;
+  vertical-align: text-bottom;
+  appearance: none;
+
+  @include utils.bpk-rtl {
+    right: 0;
+    left: auto;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+  }
+
+  &:checked,
+  &:indeterminate {
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-checkbox-checked-color,
+      tokens.$bpk-core-accent-day
+    );
+    @include utils.bpk-themeable-property(
+      border-color,
+      --bpk-checkbox-checked-color,
+      tokens.$bpk-core-accent-day
+    );
+
+    &:disabled {
+      border-color: tokens.$bpk-text-disabled-day;
+      background: none;
+    }
+  }
+
+  &:checked:not(:indeterminate) {
+    @include bpk-checkbox__checkmark;
+  }
+
+  &:disabled {
+    border-color: tokens.$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: tokens.$bpk-border-size-xl solid $color;
+  border-radius: tokens.$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: tokens.bpk-spacing-lg() + tokens.bpk-spacing-sm();
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.bpk-spacing-lg() + tokens.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: tokens.$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: tokens.$bpk-text-primary-inverse-day;
+
+  input[type='radio'] {
+    background: tokens.$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(tokens.$bpk-text-error-day);
+  }
+}
+
+/// Form radio input.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-radio__input();
+///   }
+
+@mixin bpk-radio__input {
+  $bpk-radio-size: tokens.bpk-spacing-lg() - (tokens.$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(tokens.$bpk-text-secondary-day);
+
+  @include utils.bpk-rtl {
+    right: 0;
+    left: auto;
+  }
+
+  @media screen\0 {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+  }
+
+  &:checked {
+    @include utils.bpk-themeable-property(
+      border-color,
+      --bpk-radio-checked-color,
+      tokens.$bpk-core-accent-day
+    );
+
+    &:disabled {
+      border-color: tokens.$bpk-text-disabled-day;
+    }
+  }
+
+  &:disabled {
+    border-color: tokens.$bpk-text-disabled-day;
+  }
+}
+
+/// Form label.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-label();
+///   }
+
+@mixin bpk-label {
+  display: block;
+  color: tokens.$bpk-text-primary-day;
+  font-size: tokens.$bpk-font-size-xs;
+  font-weight: tokens.$bpk-font-weight-bold;
+  line-height: tokens.$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 utils.bpk-themeable-property(
+    color,
+    --bpk-form-validation-text-color,
+    tokens.$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: tokens.$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: tokens.$bpk-label-disabled-color;
+  cursor: not-allowed;
+}
+
+/// Form validation.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-form-validation();
+///   }
+
+@mixin bpk-form-validation {
+  position: relative;
+  transform: translateY(-#{tokens.bpk-spacing-base()});
+  transition:
+    opacity tokens.$bpk-duration-sm ease-in-out,
+    transform tokens.$bpk-duration-sm ease-in-out;
+  opacity: 0;
+
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-form-validation-text-color,
+    tokens.$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: tokens.bpk-spacing-md();
+  font-size: tokens.$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: tokens.bpk-spacing-md() * 11;
+  padding: tokens.$bpk-input-padding-y tokens.$bpk-input-padding-x;
+  border: tokens.$bpk-input-border;
+  border-radius: tokens.$bpk-input-border-radius;
+  background: tokens.$bpk-input-background;
+  color: tokens.$bpk-text-primary-day;
+  appearance: none;
+
+  &::placeholder {
+    color: tokens.$bpk-text-secondary-day;
+  }
+
+  &:disabled {
+    border-color: tokens.$bpk-input-disabled-border-color;
+    background: tokens.$bpk-input-background;
+    color: tokens.$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: tokens.bpk-spacing-xl();
+  background: tokens.$bpk-input-background
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
+    no-repeat right tokens.bpk-spacing-md() center;
+
+  @include utils.bpk-themeable-property(
+    border-color,
+    --bpk-textarea-invalid-border-color,
+    tokens.$bpk-form-validation-color
+  );
+
+  @include utils.bpk-rtl {
+    padding-right: tokens.$bpk-input-padding-x;
+    padding-left: tokens.bpk-spacing-xl();
+    background-position: left tokens.bpk-spacing-md() center;
+
+    &.bpk-textarea--large {
+      padding-right: tokens.bpk-spacing-base();
+      padding-left: tokens.bpk-spacing-xxl();
+      background-position: right tokens.bpk-spacing-base() center;
+    }
+  }
+}
+
+@mixin bpk-textarea--large {
+  min-height: 6 * tokens.bpk-spacing-base();
+  padding-right: tokens.bpk-spacing-base();
+  padding-left: tokens.bpk-spacing-base();
+
+  &.bpk-textarea--invalid {
+    padding-right: tokens.bpk-spacing-xxl();
+    background-position: right tokens.bpk-spacing-base() center;
+
+    @include utils.bpk-rtl {
+      padding-right: tokens.bpk-spacing-base();
+      padding-left: tokens.bpk-spacing-xxl();
+      background-position: left tokens.bpk-spacing-base() center;
+    }
+  }
+}