:host([hidden]) {
  display: none;
}
:host {
  display: inline-block;
}

:host {
  /* typography */
  --font-size: var(--fontSizeBase300);
  --line-height: var(--lineHeightBase300);

  /* layout */
  --padding-inline: var(--spacingHorizontalMNudge);
  --padding-block: var(--spacingVerticalSNudge);
  --min-block-size: 52px;
  --block-size: var(--min-block-size);
  --inline-size: 18rem;
  --border-width: var(--strokeWidthThin);
  --control-padding-inline: var(--spacingHorizontalXXS);

  /* colors */
  --color: var(--colorNeutralForeground1);
  --background-color: var(--colorNeutralBackground1);
  --border-color: var(--colorNeutralStroke1);
  --border-block-end-color: var(--colorNeutralStrokeAccessible);
  --placeholder-color: var(--colorNeutralForeground4);
  --focus-indicator-color: var(--colorCompoundBrandStroke);

  /* elevations */
  --box-shadow: none;

  /* others */
  --contain-size: size;
  --resize: none;

  color: var(--color);
  font-family: var(--fontFamilyBase);
  font-size: var(--font-size);
  font-weight: var(--fontWeightRegular);
  line-height: var(--line-height);
  position: relative;
}

:host(:hover) {
  --border-color: var(--colorNeutralStroke1Hover);
  --border-block-end-color: var(--colorNeutralStrokeAccessibleHover);
}

:host(:active) {
  --border-color: var(--colorNeutralStroke1Pressed);
  --border-block-end-color: var(--colorNeutralStrokeAccessiblePressed);
}

:host(:focus-within) {
  outline: none;
}

:host([block]:not([hidden])) {
  display: block;
}

:host([size='small']) {
  --font-size: var(--fontSizeBase200);
  --line-height: var(--lineHeightBase200);
  --min-block-size: 40px;
  --padding-block: var(--spacingVerticalXS);
  --padding-inline: var(--spacingHorizontalSNudge);
  --control-padding-inline: var(--spacingHorizontalXXS);
}

:host([size='large']) {
  --font-size: var(--fontSizeBase400);
  --line-height: var(--lineHeightBase400);
  --min-block-size: 64px;
  --padding-block: var(--spacingVerticalS);
  --padding-inline: var(--spacingHorizontalM);
  --control-padding-inline: var(--spacingHorizontalSNudge);
}

:host([resize='both']:not(:is([disabled], :disabled))) {
  --resize: both;
}

:host([resize='horizontal']:not(:is([disabled], :disabled))) {
  --resize: horizontal;
}

:host([resize='vertical']:not(:is([disabled], :disabled))) {
  --resize: vertical;
}

:host([auto-resize]) {
  --block-size: auto;
  --contain-size: inline-size;
}

:host([appearance='filled-darker']) {
  --background-color: var(--colorNeutralBackground3);
  --border-color: var(--background-color);
  --border-block-end-color: var(--border-color);
}

:host([appearance='filled-lighter']) {
  --border-color: var(--background-color);
  --border-block-end-color: var(--border-color);
}

:host([appearance='filled-darker'][display-shadow]),
:host([appearance='filled-lighter'][display-shadow]) {
  --box-shadow: var(--shadow2);
}

:host(:state(user-invalid)) {
  --border-color: var(--colorPaletteRedBorder2);
  --border-block-end-color: var(--colorPaletteRedBorder2);
}

:host(:is([disabled], :disabled)) {
  --color: var(--colorNeutralForegroundDisabled);
  --background-color: var(--colorTransparentBackground);
  --border-color: var(--colorNeutralStrokeDisabled);
  --border-block-end-color: var(--border-color);
  --box-shadow: none;
  --placeholder-color: var(--colorNeutralForegroundDisabled);

  cursor: no-drop;
  user-select: none;
}

.root {
  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-block-end-color: var(--border-block-end-color);
  border-radius: var(--borderRadiusMedium);
  box-sizing: border-box;
  box-shadow: var(--box-shadow);
  contain: paint layout style var(--contain-size);
  display: grid;
  grid-template: 1fr / 1fr;
  inline-size: var(--inline-size);
  min-block-size: var(--min-block-size);
  block-size: var(--block-size);
  overflow: hidden;
  padding: var(--padding-block) var(--padding-inline);
  position: relative;
  resize: var(--resize);
}

:host([block]) .root {
  inline-size: auto;
}

.root::after {
  border-bottom: 2px solid var(--focus-indicator-color);
  border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
  box-sizing: border-box;
  clip-path: inset(calc(100% - 2px) 1px 0px);
  content: '';
  height: max(2px, var(--borderRadiusMedium));
  inset: auto -1px 0;
  position: absolute;
  transform: scaleX(0);
  transition-delay: var(--curveAccelerateMid);
  transition-duration: var(--durationUltraFast);
  transition-property: transform;
}

:host(:focus-within) .root::after {
  transform: scaleX(1);
  transition-property: transform;
  transition-duration: var(--durationNormal);
  transition-delay: var(--curveDecelerateMid);
}

:host([readonly]) .root::after,
:host(:is([disabled], :disabled)) .root::after {
  content: none;
}

label {
  color: var(--color);
  display: flex;
  inline-size: fit-content;
  padding-block-end: var(--spacingVerticalXS);
  padding-inline-end: var(--spacingHorizontalXS);
}

:host(:empty) label,
label[hidden] {
  display: none;
}

.auto-sizer,
.control {
  box-sizing: border-box;
  font: inherit;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  letter-space: inherit;
  padding: 0 var(--control-padding-inline);
}

.auto-sizer {
  display: none;
  padding-block-end: 2px; /* avoid scroll bar in Firefox */
  pointer-events: none;
  visibility: hidden;
  white-space: pre-wrap;
}

:host([auto-resize]) .auto-sizer {
  display: block;
}

.control {
  appearance: none;
  background-color: transparent;
  border: 0;
  color: inherit;
  field-sizing: content;
  max-block-size: 100%;
  outline: 0;
  overflow: auto;
  resize: none;
  text-align: inherit;
}

.control:disabled {
  cursor: inherit;
}

.control::placeholder {
  color: var(--placeholder-color);
}

::selection {
  color: var(--colorNeutralForegroundInverted);
  background-color: var(--colorNeutralBackgroundInverted);
}

@media (forced-colors: active) {
  :host {
    --border-color: FieldText;
    --border-block-end-color: FieldText;
    --focus-indicator-color: Highlight;
    --placeholder-color: FieldText;
  }

  :host(:hover),
  :host(:active),
  :host(:focus-within) {
    --border-color: Highlight;
    --border-block-end-color: Highlight;
  }

  :host(:is([disabled], :disabled)) {
    --color: GrayText;
    --border-color: GrayText;
    --border-block-end-color: GrayText;
    --placeholder-color: GrayText;
  }
}