_forms.scss

/*
 * 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 */

@import 'tokens.scss';
@import 'typography.scss';
@import '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: $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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=')
    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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
    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;

  // remove any default button styling
  padding: 0;
  border: 0;
  background-color: transparent;
  color: $bpk-text-secondary-day;
  cursor: pointer;
  appearance: none; // hidden by default

  @include bpk-rtl {
    right: inherit;
    left: bpk-spacing-md();
  }

  @include utils.bpk-hover {
    color: $bpk-text-primary-day;
  }

  &:active {
    color: $bpk-text-primary-day;
  }

  &--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();
  border-radius: $bpk-input-large-border-radius;

  &.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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
    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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
      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();
  border-radius: $bpk-select-large-border-radius;
  background: $bpk-surface-default-day
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
    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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
    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('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
    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();
  border-radius: $bpk-input-large-border-radius;

  &.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;
    }
  }
}