@skyscanner/backpack-web 38.21.0 → 39.0.0

package/unstable__bpk-mixins/_forms.scss

@@ -1,1045 +0,0 @@
-/*
- * 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 '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;
-
-  // remove any default button styling
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  color: tokens.$bpk-text-secondary-day;
-  cursor: pointer;
-  appearance: none; // hidden by default
-
-  @include utils.bpk-rtl {
-    right: inherit;
-    left: tokens.bpk-spacing-md();
-  }
-
-  @include utils.bpk-hover {
-    color: tokens.$bpk-text-primary-day;
-  }
-
-  &:active {
-    color: tokens.$bpk-text-primary-day;
-  }
-
-  &--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();
-  border-radius: tokens.$bpk-input-large-border-radius;
-
-  &.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();
-  border-radius: tokens.$bpk-select-large-border-radius;
-  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 {
-  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-  background-repeat: no-repeat;
-  background-position: tokens.$bpk-one-pixel-rem center;
-  background-size: calc(100% - tokens.$bpk-one-pixel-rem * 2.5) auto;
-
-  &:disabled {
-    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-  }
-}
-
-/// 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();
-  border-radius: tokens.$bpk-input-large-border-radius;
-
-  &.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;
-    }
-  }
-}