_fields.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'sass:color';
@use 'functions';
@use 'variables';
@use 'tokens/sys/themes/light';
@use 'tokens/sys/themes/dark';
@use 'tokens/sys/shape';
@use 'tokens/sys/typescale';
@use 'tokens/sys/motion';

/* stylelint-disable no-descending-specificity -- Extremely convoluted rule for advanced styling. */
.field-text {
  position: relative;
  height: 3.5rem;
  box-sizing: border-box;
  transition-property: background-color;
  transition-duration: motion.$md-sys-motion-transition-duration;
  transition-timing-function: motion.$md-sys-motion-easing-standard-curve;

  .field-text-input {
    height: 100%;
    width: 100%;
    background: none;
    box-sizing: border-box;
    border: 0;
    color: light.$md-sys-color-on-surface;
    caret-color: light.$md-sys-color-primary;
    font-family: typescale.$md-sys-typescale-body-large-font;
    line-height: typescale.$md-sys-typescale-body-large-line-height;
    font-size: typescale.$md-sys-typescale-body-large-size;
    font-weight: typescale.$md-sys-typescale-body-large-weight;
    letter-spacing: typescale.$md-sys-typescale-body-large-tracking;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: light.$md-sys-color-on-surface-variant;
    }
  }

  &.field-text-filled {
    background: light.$md-sys-color-surface-variant;
    border-radius: shape.$md-sys-shape-corner-extra-small-top;

    .field-text-input {
      padding: 1.25rem 1rem 0.5rem;
    }
  }

  &.field-text-outlined {
    .field-text-input {
      padding: 0 1rem;
    }

    .field-text-label {
      background: inherit;
      z-index: 1;
    }
  }

  &.field-text-filled::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 0.0625rem solid light.$md-sys-color-on-surface-variant;
    transition-property: border-color, border-width;
    transition-duration: motion.$md-sys-motion-transition-duration;
    transition-timing-function: motion.$md-sys-motion-easing-standard-curve;
    user-select: none;
    pointer-events: none;
  }

  &.field-text-outlined::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0.0625rem solid light.$md-sys-color-outline;
    border-radius: shape.$md-sys-shape-corner-extra-small;
    transition-property: border-color, border-width;
    transition-duration: motion.$md-sys-motion-transition-duration;
    transition-timing-function: motion.$md-sys-motion-easing-standard-curve;
    user-select: none;
    pointer-events: none;
    box-sizing: border-box;
  }

  .field-text-icon-leading {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    color: light.$md-sys-color-on-surface-variant;
    font-size: 1.5rem;
    line-height: 0;
  }

  .field-text-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    margin-right: 1rem;
    color: light.$md-sys-color-on-surface-variant;
    font-family: typescale.$md-sys-typescale-body-large-font;
    line-height: typescale.$md-sys-typescale-body-large-line-height;
    font-size: typescale.$md-sys-typescale-body-large-size;
    font-weight: typescale.$md-sys-typescale-body-large-weight;
    letter-spacing: typescale.$md-sys-typescale-body-large-tracking;
    transition-property: color, transform, top, font-size, line-height, left, padding;
    transition-duration: motion.$md-sys-motion-transition-duration;
    transition-timing-function: motion.$md-sys-motion-easing-standard-curve;
  }

  .field-text-icon-trailing {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    color: light.$md-sys-color-on-surface-variant;
    font-size: 1.5rem;
    line-height: 0;
    transition-property: color;
    transition-duration: motion.$md-sys-motion-transition-duration;
    transition-timing-function: motion.$md-sys-motion-easing-standard-curve;
  }

  &:has(> .field-text-icon-leading) {
    .field-text-input {
      padding-left: 3.25rem;
    }

    &.field-text-filled .field-text-label {
      left: 3.25rem;
    }
  }

  &:has(> .field-text-icon-trailing) {
    .field-text-input {
      padding-right: 3.25rem;
    }

    .field-text-label {
      margin-right: 3.25rem;
    }
  }

  // Webkit autofill hide hack
  // TODO: Support autofill color.
  .field-text-input:-webkit-autofill,
  .field-text-input:-webkit-autofill:focus {
    transition: background-color 2147483647s 0s, color 2147483647s 0s !important;
  }

  // Disabled
  &:has(> .field-text-input:disabled) {
    &.field-text-filled {
      background: color.scale(light.$md-sys-color-on-surface, $alpha: -96%);
    }

    &.field-text-filled::after {
      border-color: color.scale(light.$md-sys-color-on-surface, $alpha: -62%);
    }

    .field-text-label,
    .field-text-input,
    .field-text-icon-leading,
    .field-text-icon-trailing {
      color: color.scale(light.$md-sys-color-on-surface, $alpha: -62%);
    }
  }

  // Field input not empty
  &:has(> .field-text-input:not(:placeholder-shown)),
  &:focus-within:not(:has(> .field-text-input:disabled)) {
    &.field-text-filled .field-text-label {
      top: 0.5rem;
    }

    &.field-text-outlined .field-text-label {
      top: -0.475rem;
      padding: 0 0.25rem;
    }

    .field-text-label {
      transform: translateY(0);
      line-height: typescale.$md-sys-typescale-body-small-line-height;
      font-size: typescale.$md-sys-typescale-body-small-size;
    }
  }

  &:has(> .field-text-input:placeholder-shown):has(> .field-text-input:not(:focus)) {
    &:has(> .field-text-icon-leading) {
      &.field-text-outlined .field-text-label {
        left: 3.25rem;
      }
    }
  }

  // Focused
  &:focus-within:not(:has(> .field-text-input:disabled)) {
    &.field-text-filled::after {
      border-bottom: 0.125rem solid light.$md-sys-color-primary;
    }

    &.field-text-outlined::after {
      border-width: 0.125rem;
      border-color: light.$md-sys-color-primary;
    }

    .field-text-label {
      color: light.$md-sys-color-primary;
    }
  }

  // Hovered
  &:hover:not(:has(> .field-text-input:disabled), :focus-within) {
    &.field-text-filled {
      background: functions.state-layer(light.$md-sys-color-surface-variant, light.$md-sys-color-on-surface, 'hover');
    }

    &.field-text-outlined {
      &::after {
        border-color: light.$md-sys-color-primary;
      }

      .field-text-label {
        color: light.$md-sys-color-on-surface;
      }
    }
  }

  // Error
  &:not(:has(> .field-text-input:disabled)):has(> .field-text-input:invalid) {
    &::after {
      border-color: light.$md-sys-color-error;
    }

    .field-text-label,
    .field-text-icon-trailing {
      color: light.$md-sys-color-error;
    }

    .field-text-input {
      caret-color: light.$md-sys-color-error;
    }

    // Error hover
    &:hover:not(:has(> .field-text-input:disabled), :focus-within) {
      &.field-text-filled {
        background: functions.state-layer(light.$md-sys-color-surface-variant, light.$md-sys-color-on-surface, 'hover');
      }

      &.field-text-filled::after {
        border-color: light.$md-sys-color-on-error-container;
      }

      .field-text-label,
      .field-text-icon-trailing {
        color: light.$md-sys-color-on-error-container;
      }
    }
  }

  // Dark theme
  @at-root body[data-#{variables.$prefix}theme='dark'] &,
    .#{variables.$prefix}theme-dark & {
    &.field-text-filled {
      background: dark.$md-sys-color-surface-variant;
    }

    &.field-text-outlined {
      border-color: dark.$md-sys-color-outline;
    }

    &.field-text-filled::after {
      border-color: dark.$md-sys-color-on-surface-variant;
    }

    .field-text-input {
      color: dark.$md-sys-color-on-surface;
      caret-color: dark.$md-sys-color-primary;

      &::placeholder {
        color: dark.$md-sys-color-on-surface-variant;
      }
    }

    .field-text-icon-leading {
      color: dark.$md-sys-color-on-surface-variant;
    }

    .field-text-label {
      color: dark.$md-sys-color-on-surface-variant;
    }

    .field-text-icon-trailing {
      color: dark.$md-sys-color-on-surface-variant;
    }

    &:has(> .field-text-input:disabled) {
      &.field-text-filled {
        background: color.scale(dark.$md-sys-color-on-surface, $alpha: -96%);
      }

      &.field-text-filled::after {
        border-color: color.scale(dark.$md-sys-color-on-surface, $alpha: -62%);
      }

      .field-text-label,
      .field-text-input,
      .field-text-icon-leading,
      .field-text-icon-trailing {
        color: color.scale(dark.$md-sys-color-on-surface, $alpha: -62%);
      }
    }

    &:focus-within:not(:has(> .field-text-input:disabled)) {
      &.field-text-filled::after {
        border-color: dark.$md-sys-color-primary;
      }

      .field-text-label {
        color: dark.$md-sys-color-primary;
      }
    }

    &:hover:not(:has(> .field-text-input:disabled), :focus-within) {
      &.field-text-filled {
        background: functions.state-layer(dark.$md-sys-color-surface-variant, dark.$md-sys-color-on-surface, 'hover');
      }
    }

    &:not(:has(> .field-text-input:disabled)):has(> .field-text-input:invalid) {
      &.field-text-filled::after {
        border-color: dark.$md-sys-color-error;
      }

      .field-text-label,
      .field-text-icon-trailing {
        color: dark.$md-sys-color-error;
      }

      .field-text-input {
        caret-color: dark.$md-sys-color-error;
      }

      &:hover:not(:has(> .field-text-input:disabled), :focus-within) {
        &.field-text-filled {
          background: functions.state-layer(dark.$md-sys-color-surface-variant, dark.$md-sys-color-on-surface, 'hover');
        }

        &.field-text-filled::after {
          border-color: dark.$md-sys-color-on-error-container;
        }

        .field-text-label,
        .field-text-icon-trailing {
          color: dark.$md-sys-color-on-error-container;
        }
      }
    }
  }
}

.field-text-support {
  margin: 0.25rem 1rem 0;
  color: light.$md-sys-color-on-surface-variant;
  font-family: typescale.$md-sys-typescale-body-small-font;
  line-height: typescale.$md-sys-typescale-body-small-line-height;
  font-size: typescale.$md-sys-typescale-body-small-size;
  font-weight: typescale.$md-sys-typescale-body-small-weight;
  letter-spacing: typescale.$md-sys-typescale-body-small-tracking;

  &[aria-disabled='true'] {
    color: color.scale(light.$md-sys-color-on-surface, $alpha: -62%);
  }

  &[aria-invalid='true'] {
    color: light.$md-sys-color-error;
  }

  @at-root body[data-#{variables.$prefix}theme='dark'] &,
    .#{variables.$prefix}theme-dark & {
    color: dark.$md-sys-color-on-surface-variant;

    &[aria-disabled='true'] {
      color: color.scale(dark.$md-sys-color-on-surface, $alpha: -62%);
    }

    &[aria-invalid='true'] {
      color: dark.$md-sys-color-error;
    }
  }
}