/* stylelint-disable selector-max-class, selector-max-specificity */
.Wrapper {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  padding: 1px;
  cursor: text;
}

.Wrapper-disabled {
  opacity: var(--x-opacity-disabled);
  cursor: disabled;
  pointer-events: none;
}

.Wrapper-readonly {
  opacity: var(--x-opacity-readonly);
}

.Wrapper-backgroundTransparent {
  --placeholder-color: var(--x-default-color-text-subdued);
}

.Wrapper-backgroundSurfacePrimary {
  --placeholder-color: var(--x-color-surface-primary-text-subdued);
  --x-default-color-text-subdued: var(--x-color-surface-primary-text-subdued);
  --x-default-color-accent: var(--x-color-surface-primary-accent);
  color: var(--x-color-surface-primary-text-emphasized);
}

.Wrapper-backgroundSurfaceSecondary {
  --placeholder-color: var(--x-color-surface-secondary-text-subdued);
  --x-default-color-text-subdued: var(--x-color-surface-secondary-text-subdued);
  --x-default-color-accent: var(--x-color-surface-secondary-accent);
  color: var(--x-color-surface-secondary-text-emphasized);
}

.Wrapper-backgroundSurfaceTertiary {
  --placeholder-color: var(--x-color-surface-tertiary-text-subdued);
  --x-default-color-text-subdued: var(--x-color-surface-tertiary-text-subdued);
  --x-default-color-accent: var(--x-color-surface-tertiary-accent);
  color: var(--x-color-surface-tertiary-text-emphasized);
}

.Icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: em(44px);
  padding-inline-start: em(11px);
}

.IconInner {
  width: rem(24px);
  height: rem(24px);
}

.Prefix {
  position: relative;
  z-index: 1;
  padding-block: em(11px) em(11px);
  padding-inline-start: em(11px);
}

.Prefix-inside {
  padding-block: em(19px) em(4px);
}

.Field-Wrapper {
  flex: 1;
}

.Field {
  position: relative;
  z-index: 1;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border-radius: var(
    --x-text-field-border-radius,
    var(--x-control-border-radius, var(--x-global-border-radius))
  );
  font-size: var(--x-typography-size-default);
  outline: none;
  padding: em(11px) em(11px) em(12px);
  min-height: em(44px);
  text-transform: var(--x-global-typography-letter-case);
  letter-spacing: var(--x-global-typography-kerning);
  line-height: var(--x-global-typography-line-size-default);

  &::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
  }

  &:invalid {
    box-shadow: none;
  }
}

.Field-hasActions {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.Backdrop {
  position: absolute;
  inset: 0;
  border: 0 transparent solid;
  border-radius: var(
    --x-text-field-border-radius,
    var(--x-control-border-radius, var(--x-global-border-radius))
  );
  transition: box-shadow var(--x-duration-base) var(--x-timing-base),
    border var(--x-duration-base) var(--x-timing-base);
}

.Suffix {
  position: relative;
  z-index: 1;
  padding-block: em(11px);
  padding-inline-end: em(11px);
}

.Actions {
  position: relative;
  z-index: 1;
  display: flex;
  height: em(44px);
  padding-inline-end: em(11px);
  cursor: default;
}

.Field-floating {
  transition: all var(--x-duration-base) var(--x-timing-base);
  padding-block: em(19px) em(4px);
}

.Field-prefixed {
  transition: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.Backdrop-backgroundTransparent {
  background-color: transparent;
}

.Backdrop-backgroundSurfacePrimary {
  background-color: var(--x-color-surface-primary);
}

.Backdrop-backgroundSurfaceSecondary {
  background-color: var(--x-color-surface-secondary);
}

.Backdrop-backgroundSurfaceTertiary {
  background-color: var(--x-color-surface-tertiary);
}

.Backdrop-borderNone {
  &.Backdrop-focusBorderFull {
    &.focus {
      box-shadow: 0 0 0 2px var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        box-shadow: 0 0 0 2px var(--x-color-critical-accent);
      }
    }
  }

  &.Backdrop-focusBorderBlockEnd {
    &.focus {
      box-shadow: 0 2px 0 0 var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        box-shadow: 0 2px 0 0 var(--x-color-critical-accent);
      }
    }
  }
}

.Backdrop-borderFull {
  border-width: 1px;
  border-color: var(--x-default-color-border);

  &.Backdrop-focusBorderFull {
    &.focus {
      border-color: var(--x-color-interactive-text);
      box-shadow: 0 0 0 1px var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        border-color: var(--x-color-critical-accent);
        box-shadow: 0 0 0 1px var(--x-color-critical-accent);
      }
    }
  }

  &.Backdrop-focusBorderBlockEnd {
    &.focus {
      border-bottom-color: var(--x-color-interactive-text);
      box-shadow: 0 1px 0 0 var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        border-bottom-color: var(--x-color-critical-accent);
        box-shadow: 0 1px 0 0 var(--x-color-critical-accent);
      }
    }
  }
}

.Backdrop-borderBlockEnd {
  border-width: 0 0 1px;
  border-color: var(--x-default-color-border);

  &.Backdrop-focusBorderFull {
    &.focus {
      border-color: var(--x-color-interactive-text);
      box-shadow: 1px 0 0 1px var(--x-color-interactive-text),
        -1px 0 0 1px var(--x-color-interactive-text),
        1px -1px 0 1px var(--x-color-interactive-text),
        -1px -1px 0 1px var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        border-color: var(--x-color-critical-accent);
        box-shadow: 1px 0 0 1px var(--x-color-critical-accent),
          -1px 0 0 1px var(--x-color-critical-accent),
          1px -1px 0 1px var(--x-color-critical-accent),
          -1px -1px 0 1px var(--x-color-critical-accent);
      }
    }
  }

  &.Backdrop-focusBorderBlockEnd {
    &.focus {
      border-color: var(--x-color-interactive-text);
      box-shadow: 0 1px 0 0 var(--x-color-interactive-text);
    }

    &.hasError {
      &,
      &.focus {
        border-color: var(--x-color-critical-accent);
        box-shadow: 0 1px 0 0 var(--x-color-critical-accent);
      }
    }
  }
}

.Backdrop-borderColorEmphasized {
  border-color: var(--x-default-color-border-emphasized);
}

.Error-errorIndentationToText {
  padding: 0 em(12px);
}

.Backdrop-disabled {
  &.Backdrop-backgroundSurfacePrimary {
    background-color: var(--x-color-surface-primary-disabled);
  }

  &.Backdrop-backgroundSurfaceSecondary {
    background-color: var(--x-color-surface-secondary-disabled);
  }

  &.Backdrop-backgroundSurfaceTertiary {
    background-color: var(--x-color-surface-tertiary-disabled);
  }
}

.Backdrop-readOnly {
  &.Backdrop-backgroundSurfacePrimary {
    background-color: var(--x-color-surface-primary-disabled);
  }

  &.Backdrop-backgroundSurfaceSecondary {
    background-color: var(--x-color-surface-secondary-disabled);
  }

  &.Backdrop-backgroundSurfaceTertiary {
    background-color: var(--x-color-surface-tertiary-disabled);
  }
}

.multiline {
  @supports (display: grid) {
    display: grid;
  }
}

.Field-multiline {
  resize: block;

  @supports (display: grid) {
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
    resize: none;
  }
}

.MultilineClone {
  display: none;

  @supports (display: grid) {
    display: block;
    white-space: pre-wrap;
    visibility: hidden;
  }
}

.typeNumber {
  appearance: textfield;
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }
}