/* ------------------------------------ *\
   Forms
\* ------------------------------------ */

@import '@bolt/core-v3.x';

// General Form Elements
select {
  cursor: pointer;
}

.c-bolt-form,
.c-bolt-fieldset {
  display: block;
  margin-bottom: var(--bolt-spacing-y-medium);

  &:last-child {
    margin-bottom: 0;
  }
}

.c-bolt-fieldset {
  border: none;
}

.c-bolt-legend {
  display: block;
  margin: 0 0 var(--bolt-spacing-y-xsmall) 0;
}

// Input List
.c-bolt-input-list {
  margin: 0;
  padding: 0;
}

.c-bolt-input-list--stack-spacing-none {
  .c-bolt-input-list__item {
    margin-bottom: 0;
  }
}

.c-bolt-input-list--stack-spacing-xsmall {
  .c-bolt-input-list__item {
    margin-bottom: var(--bolt-spacing-y-xsmall);
  }
}

.c-bolt-input-list__item {
  display: block;
  position: relative;
  margin: 0 0 var(--bolt-spacing-y-small) 0;
  padding: 0;

  &:last-child {
    margin-bottom: 0;
  }
}

// Checkbox and Radio Inputs
$bolt-inline-label-transition: var(--bolt-transition-timing)
  cubic-bezier(0.45, 1.8, 0.5, 0.75);
$bolt-inline-label-input-color: var(--bolt-color-navy-light);
$bolt-inline-label-input-border-color: var(--bolt-color-navy-light);
$bolt-inline-label-input-border-style: $bolt-border-style;
$bolt-inline-label-input-border-width: $bolt-border-width;

// Data Inputs
// Inputs do not follow theming, they always have white background and dark text.
$bolt-floating-label-text-scale: 0.8;
$bolt-floating-label-text-color: var(--bolt-color-navy-light);
$bolt-floating-label-text-color-active: var(--bolt-color-navy-light);
$bolt-floating-label-transition: var(--bolt-transition);
$bolt-input-text-color: var(--bolt-color-black);
$bolt-input-text-color--invalid: var(--bolt-color-error);
$bolt-input-text-color--disabled: var(--bolt-color-gray);
$bolt-input-background-color: var(--bolt-color-white);
$bolt-input-background-color--disabled: var(--bolt-color-gray-xlight);
$bolt-input-background-color--invalid: var(--bolt-color-error-light);
$bolt-input-placeholder-color: var(--bolt-color-gray);
$bolt-input-placeholder-color--invalid: var(--bolt-color-error);
$bolt-input-placeholder-color--disabled: var(--bolt-color-gray);
$bolt-input-icon-color: var(--bolt-color-black);
$bolt-input-icon-color--active: var(--bolt-color-navy-light);
$bolt-input-icon-color--invalid: var(--bolt-color-error);
$bolt-input-border-color: var(--m-bolt-border);
$bolt-input-border-color--focus: var(--bolt-color-navy-light);
$bolt-input-border-color--invalid: var(--bolt-color-error);
$bolt-input-border-width: $bolt-border-width;
$bolt-input-border-style: $bolt-border-style;
$bolt-input-border-radius: $bolt-border-radius;
$bolt-input-box-shadow-color: var(--m-bolt-tertiary);
$bolt-input-shadow-level: 'level-20';
$bolt-input-transition: var(--bolt-transition);

@mixin bolt-input-placeholder($color) {
  &::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */

    // Workaround for Drupal, which currently uses sanitize.css. Once removed, the following line will be unnecessary.
    opacity: bolt-opacity(100);
    color: $color;
  }

  &::-moz-placeholder {
    /* Firefox 19+ */
    color: $color;
  }

  &:-ms-input-placeholder {
    /* IE 10+ */
    color: $color;
  }

  &:-moz-placeholder {
    /* Firefox 18- */
    color: $color;
  }
}

@mixin _bolt-input-text-and-background {
  padding: calc(var(--bolt-spacing-y-medium) / 2 - 1px)
    var(--bolt-spacing-x-small); // [Mai] medium/2 matches button vertical spacing.
  font-family: var(--bolt-type-font-family-body);
  font-size: var(--bolt-type-font-size-small);
  color: $bolt-input-text-color;
  line-height: calc(
    var(--bolt-type-line-height-xsmall) * 1em - 1px
  ); // [Mai] The line-height matches button's line-height, the 1px offsets the 1px border from the input.
  background-color: $bolt-input-background-color;

  @include bolt-mq($until: small) {
    padding-top: calc(var(--bolt-spacing-y-medium) / 2 - 0.1875rem);
    padding-bottom: calc(var(--bolt-spacing-y-medium) / 2 - 0.25rem);
    font-size: 16px; // [Mai] Mobile Safari will zoom in when input is focused if the text is not at least 16px.
  }
}

.c-bolt-input {
  // This should ONLY apply to <input> elements, NOT anything else like <label>, <div>, <span>, etc.
  @include bolt-input-placeholder($bolt-input-placeholder-color);
  @include _bolt-input-text-and-background;

  display: block;
  appearance: none !important; // Removing native controls
  opacity: bolt-opacity(100); // [Mai] Reset mobile Safari browser default.
  transform: translate3d(
    0,
    0,
    0
  ); // Force browsers to render this using hardward acceleration. This resolves a rendering quirk seen in Chrome where the hover state would only work intermittently.
  width: 100%;
  text-indent: 0.01px;
  border-radius: $bolt-input-border-radius;
  border-width: $bolt-input-border-width;
  border-style: $bolt-input-border-style;
  border-color: $bolt-input-border-color;
  outline: none;
  transition: all $bolt-input-transition;
  text-overflow: '';

  &::-ms-expand {
    display: none;
  }

  &.is-invalid,
  &.is-touched:invalid {
    @include bolt-input-placeholder($bolt-input-placeholder-color--invalid);

    padding-right: 5ch;
    color: $bolt-input-text-color--invalid;
    border-color: $bolt-input-border-color--invalid;
    background-color: $bolt-input-background-color--invalid;
  }

  &.is-disabled,
  &:disabled {
    @include bolt-input-placeholder($bolt-input-placeholder-color--disabled);

    color: $bolt-input-text-color--disabled;
    cursor: not-allowed;
    background-color: $bolt-input-background-color--disabled;
  }

  &.is-filled,
  &:focus {
    padding-top: calc(var(--bolt-spacing-y-medium) / 2 + 0.55rem - 1px);
    padding-bottom: calc(var(--bolt-spacing-y-medium) / 2 - 0.55rem - 1px);
  }

  &:hover {
    &:not(.is-disabled):not(:disabled) {
      @include bolt-shadow(
        $key: $bolt-input-shadow-level,
        $base-color: $bolt-input-box-shadow-color
      );
    }
  }

  &:focus {
    border-color: $bolt-input-border-color--focus !important;

    &:not(.is-disabled):not(:disabled) {
      box-shadow: 0 0 0 2px var(--bolt-color-white),
        0 1px 4px 2px rgba($bolt-input-box-shadow-color, 0.1),
        0 5px 12px 0 rgba($bolt-input-box-shadow-color, 0.08);
    }
  }

  // [Mai] This is only used for displaying formatted numbers, it covers up the actual input field.
  .c-bolt-input__display-value {
    display: none;
  }

  &.is-filled:not(:invalid):not(:focus) ~ .c-bolt-input__display-value {
    @include _bolt-input-text-and-background;

    display: block;
    position: absolute;
    top: 1px;
    right: 1px;
    left: 1px;
    pointer-events: none;

    &:before,
    &:after {
      display: inline-block;
    }

    &:before {
      content: attr(data-bolt-form-display-value-before);
    }

    &:after {
      content: attr(data-bolt-form-display-value-after);
    }
  }
}

.c-bolt-input--checkbox,
.c-bolt-input--radio {
  @include bolt-visuallyhidden;

  display: inline;
}

.c-bolt-input--select {
  padding-right: calc(
    var(--bolt-spacing-x-small) + 24px
  ); // 24px is icon size, if icon component changes, this needs to update as well.
}

.c-bolt-floating-label {
  opacity: bolt-opacity(0);
  position: absolute;
  top: 0.9rem;
  left: calc(var(--bolt-spacing-x-small) + 2px);
  transform: translate3d(0, -50%, 0) translateY(0.4rem);
  color: $bolt-floating-label-text-color;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: all $bolt-floating-label-transition;
  white-space: nowrap;
  transform-origin: 0 100%;
}

.c-bolt-input.is-filled,
.c-bolt-input:focus,
.c-bolt-custom-input.is-active {
  // [Mai] A custom input is considered active if the regular input inside is filled or in focus.
  & ~ .c-bolt-floating-label {
    opacity: bolt-opacity(100);
    transform: translate3d(0, -100%, 0) translateY(0.1rem)
      scale($bolt-floating-label-text-scale);
  }
}

.c-bolt-input:focus,
.c-bolt-custom-input.is-active {
  & ~ .c-bolt-floating-label {
    color: $bolt-floating-label-text-color-active;
  }
}

.c-bolt-inline-label {
  display: inline-block;
  position: relative;
  padding-left: 1.5em;
  font-size: var(--bolt-type-font-size-small);
  color: var(--m-bolt-text);
  line-height: var(--bolt-type-line-height-small);
  cursor: pointer;
  user-select: none;

  &:before,
  &:after {
    position: absolute;
    transition: all $bolt-inline-label-transition;
  }

  &:before {
    content: '';
    top: 0.2em;
    left: 0;
    width: 1em;
    height: 1em;
    border-width: $bolt-inline-label-input-border-width;
    border-style: $bolt-inline-label-input-border-style;
    border-color: $bolt-inline-label-input-border-color;
    background-color: $bolt-input-background-color;
  }

  &:after {
    content: '';
    opacity: bolt-opacity(0);
    transform-origin: center;
  }
}

.c-bolt-inline-label--checkbox {
  &:before {
    border-radius: 2px;
  }

  &:after {
    top: 0.3em;
    left: 0.375em;
    transform: rotate(45deg) scale(0.1);
    width: calc(1em - 0.675em);
    height: calc(1em - 0.325em);
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: $bolt-inline-label-input-color;
  }
}

.c-bolt-inline-label--radio {
  &:before,
  &:after {
    border-radius: 1em;
  }

  &:after {
    top: calc(0.2em + 3px);
    left: 3px;
    transform: scale(0.1);
    width: calc(1em - 6px);
    height: calc(1em - 6px);
    background-color: $bolt-inline-label-input-color;
  }
}

.c-bolt-input--checkbox,
.c-bolt-input--radio {
  &:focus ~ .c-bolt-inline-label,
  &:hover ~ .c-bolt-inline-label {
    &:before {
      @include bolt-shadow(
        $key: $bolt-input-shadow-level,
        $base-color: $bolt-input-box-shadow-color
      );
    }
  }

  &:focus ~ .c-bolt-inline-label {
    &:before {
      @include bolt-shadow(
        $key: $bolt-input-shadow-level,
        $base-color: $bolt-input-box-shadow-color
      );
    }
  }

  &:checked ~ .c-bolt-inline-label {
    &:before {
      border-color: $bolt-input-border-color--focus;
    }

    &:after {
      opacity: bolt-opacity(100);
    }

    .c-bolt-inline-label__emphasize {
      font-weight: var(--bolt-type-font-weight-semibold);
    }
  }

  &:disabled ~ .c-bolt-inline-label {
    &:before {
      background-color: $bolt-input-background-color--disabled;
    }
  }
}

.c-bolt-input--checkbox {
  &:checked ~ .c-bolt-inline-label {
    &:after {
      transform: rotate(45deg) scale(1);
    }
  }
}

.c-bolt-input--radio {
  &:checked ~ .c-bolt-inline-label {
    &:after {
      transform: scale(1);
    }
  }
}

.c-bolt-input-icons {
  position: absolute;
  top: 1px;
  right: 1px;
  padding-top: calc(
    var(--bolt-spacing-y-medium) / 2 - 0.35rem
  ); // [Mai] This 0.325rem is a magic number that will make sure both English and Japanese spacing settings work with the icon's vertical alignment.
  padding-right: var(--bolt-spacing-x-small);
  padding-bottom: 1px;
  padding-left: 0;
  font-size: var(--bolt-type-font-size-small);
  color: $bolt-input-icon-color;
  line-height: var(--bolt-type-line-height-small);
  pointer-events: none;
  border-radius: $bolt-input-border-radius;
}

.c-bolt-input:focus,
.c-bolt-custom-input.is-active {
  & ~ .c-bolt-input-icons {
    color: $bolt-input-icon-color--active;
  }
}

.c-bolt-input-icon {
  display: inline-block;
}

.c-bolt-input-icon--link {
  padding: 0;
  color: var(--bolt-color-navy-light);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  background: none;
}

.c-bolt-input-icon--invalid {
  display: none; // The invalid icon will always be present and simply un-hidden when a field becomes invalid
  color: $bolt-input-icon-color--invalid;
}

.c-bolt-input.is-invalid ~ .c-bolt-input-icons,
.c-bolt-input.is-touched:invalid ~ .c-bolt-input-icons {
  .c-bolt-input-icon--invalid {
    display: block;
  }
}

.c-bolt-input.is-disabled ~ .c-bolt-input-icons,
.c-bolt-input:disabled ~ .c-bolt-input-icons {
  background-color: $bolt-input-background-color--disabled;

  &:before {
    background: linear-gradient(
      to left,
      $bolt-input-background-color--disabled,
      rgba(255, 255, 255, 0)
    );
  }
}

.c-bolt-input-icon__text {
  @include bolt-visuallyhidden;
}

// Input validation or helper text
$bolt-input-message-text-color--invalid: var(--bolt-color-error);

.c-bolt-input-message {
  padding: var(--bolt-spacing-y-xxsmall) var(--bolt-spacing-x-small);
  font-size: var(--bolt-type-font-size-medium);
  line-height: var(--bolt-type-line-height-medium);
}

.c-bolt-input-message--invalid {
  margin-top: var(--bolt-spacing-y-xxsmall);
  font-size: var(--bolt-type-font-size-xsmall);
  font-weight: var(--bolt-type-font-weight-semibold);
  color: $bolt-input-message-text-color--invalid;
  line-height: var(--bolt-type-line-height-xsmall);
  border-left: 3px solid var(--bolt-color-error);
  border-radius: bolt-border-radius(small);
  background-color: var(--bolt-color-error-light);
}

// Strength Indicator
$bolt-strength-indicator-transition: var(--bolt-transition);

.c-bolt-strength-indicator {
  display: none;
  padding: calc(var(--bolt-spacing-y-small) / 2) var(--bolt-spacing-x-small);

  .c-bolt-input[type='password']:focus ~ & {
    display: block;
  }
}

.c-bolt-strength-indicator__meter {
  display: block;
  width: 100%;
  height: 0.25rem;
  margin-bottom: var(--bolt-spacing-y-xsmall);
  border-radius: 0.25rem;
  transition: all $bolt-strength-indicator-transition;
}

.c-bolt-strength-indicator__meter--00 {
  background: linear-gradient(
    90deg,
    var(--bolt-color-navy-xlight) 0%,
    var(--bolt-color-navy-xlight) 0%
  );
}

.c-bolt-strength-indicator__meter--25 {
  background: linear-gradient(
    90deg,
    var(--bolt-color-success) 22%,
    var(--bolt-color-error) 28%
  );
}

.c-bolt-strength-indicator__meter--50 {
  background: linear-gradient(
    90deg,
    var(--bolt-color-success) 47%,
    var(--bolt-color-error) 53%
  );
}

.c-bolt-strength-indicator__meter--75 {
  background: linear-gradient(
    90deg,
    var(--bolt-color-success) 72%,
    var(--bolt-color-error) 78%
  );
}

.c-bolt-strength-indicator__meter--100 {
  background: linear-gradient(
    90deg,
    var(--bolt-color-success) 100%,
    var(--bolt-color-error) 100%
  );
}

.c-bolt-strength-indicator__text {
  display: block;
  font-size: var(--bolt-type-font-size-xsmall);
  line-height: var(--bolt-type-line-height-xsmall);
}

// Toggle
.c-bolt-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  margin-bottom: var(--bolt-spacing-y-medium);
  border-radius: $bolt-input-border-radius;
  background-color: $bolt-input-border-color;

  &:last-child {
    margin-bottom: 0;
  }
}

.c-bolt-toggle__item-input {
  @include bolt-visuallyhidden;

  &:checked + .c-bolt-toggle__item-label {
    border-color: $bolt-input-border-color;
    background-color: var(--bolt-color-white);
  }

  &:focus + .c-bolt-toggle__item-label {
    @include bolt-shadow(
      $key: $bolt-input-shadow-level,
      $base-color: $bolt-input-box-shadow-color
    );
  }
}

.c-bolt-toggle__item-label {
  display: block;
  margin: $bolt-input-border-width * -1;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  border-radius: $bolt-input-border-radius;
  border-width: $bolt-input-border-width;
  border-style: $bolt-input-border-style;
  border-color: transparent;
  transition: all $bolt-input-transition;
}

.c-bolt-block-label {
  display: block;
  margin-bottom: var(--bolt-spacing-y-xsmall);
  font-family: var(--bolt-type-font-family-headline);
  font-size: var(--bolt-type-font-size-small);
  color: var(--m-bolt-headline);
  line-height: var(--bolt-type-line-height-small);

  & ~ .c-bolt-block-input-wrapper {
    position: relative;

    .c-bolt-input.is-filled,
    .c-bolt-input:focus {
      padding: calc(var(--bolt-spacing-y-medium) / 2 - 1px)
        var(--bolt-spacing-x-small); // [Mai] medium/2 matches button vertical spacing.

      @include bolt-mq($until: small) {
        padding-top: calc(var(--bolt-spacing-y-medium) / 2 - 0.1875rem);
        padding-bottom: calc(var(--bolt-spacing-y-medium) / 2 - 0.25rem);
      }
    }
  }
}