/*
 * Text input — self-contained styles, scoped to `.font-generator-text-input`.
 * Consolidated from the Figma export; the export's page-wide reset is
 * intentionally omitted so it can't clobber the host Express page.
 */

/* ─── Scoped reset ────────────────────────────────────────────────────────── */

.font-generator-text-input,
.font-generator-text-input * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.font-generator-text-input p,
.font-generator-text-input div,
.font-generator-text-input button,
.font-generator-text-input textarea {
  margin: 0;
}

/* ─── Component ───────────────────────────────────────────────────────────── */

.font-generator-text-input {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: var(--spacing-400);
  position: relative;
  background: var(--color-gray-150);
}

/* Inline rail (1200px+): no side padding, so the column renders at its full
   computed grid-track width instead of being squeezed by extra padding. */
@media (min-width: 1200px) {
  .font-generator-text-input {
    padding-left: 0;
    padding-right: 0;
  }
}

.font-generator-text-input .text-field {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  align-items: flex-end;
  gap: var(--spacing-300);
  padding: var(--spacing-100) var(--spacing-300) var(--spacing-300);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--color-white);
  /* Reserved (not `none`) so Hover/Active only swap border-color, rather than
     adding a border where none existed and shifting the field's content by 1px. */
  border: 1px solid transparent;
  border-radius: var(--Corner-radius-corner-radius-200);
  overflow: hidden;
  box-shadow: 0px 4px 12px #00000014;
}

/* ─── States ───────────────────────────────────────────────────────────────
   Design QA (MWPW-202072) added Hover/Active/Focus/Disabled to the text-field
   component. The ring is a second box-shadow rather than a bordered
   pseudo-element, so it isn't clipped by this element's own `overflow: hidden`
   and automatically follows its border-radius. */

.font-generator-text-input .text-field:hover:not(:has(.label:focus)) {
  border-color: var(--color-gray-400-variant);
  box-shadow: 0px 4px 6px #00000014;
}

/* Focus (ring) and Active (dark border) are mutually exclusive: .is-active is
   toggled in JS on pointerdown/input/blur (see textInput.js), so keyboard
   focus gets the ring until the user starts typing. */
.font-generator-text-input .text-field:has(.label:focus):not(.is-active) {
  box-shadow: 0 0 0 2px var(--Buttons-Down), 0px 4px 6px #00000014;
}

.font-generator-text-input .text-field.is-active {
  border-color: var(--color-gray-950);
  box-shadow: 0px 4px 6px #00000014;
}

.font-generator-text-input .text-field:has(.label:disabled) {
  background-color: var(--color-light-gray);
  border-color: transparent;
  box-shadow: 0px 4px 6px #00000014;
}

.font-generator-text-input .text-field:has(.label:disabled) .preview-text-label,
.font-generator-text-input .text-field:has(.label:disabled) .label,
.font-generator-text-input .text-field:has(.label:disabled) .label::placeholder,
.font-generator-text-input .text-field:has(.label:disabled) .character-count,
.font-generator-text-input .text-field:has(.label:disabled) .text-wrapper {
  color: var(--color-gray-400-variant);
}

.font-generator-text-input .text-field:has(.label:disabled) .suggestions-bar {
  border-top-color: var(--color-gray-300-variant);
}

.font-generator-text-input .text-field:has(.label:disabled) .resize-handle,
.font-generator-text-input .text-field:has(.label:disabled) .tag-pills {
  pointer-events: none;
}

.font-generator-text-input .label:disabled {
  cursor: not-allowed;
}

.font-generator-text-input .text-area-l-in-line {
  display: flex;
  flex-direction: column;
  min-width: 112px;
  align-items: flex-end;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* Visible "Preview Text" label above the textarea (Component/M/Regular).
   Owns the label→textarea spacing directly (the container's flex gap was
   removed so it no longer double-spaces the field and suggestions bar). */
.font-generator-text-input .preview-text-label {
  align-self: stretch;
  width: 100%;
  text-align: left;
  color: var(--color-dark-gray);
  font-family: var(--body-font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.font-generator-text-input .field {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 9px;
  margin-bottom: var(--spacing-300);
}

.font-generator-text-input .label {
  --fg-textinput-height: 62px;
  --fg-counter-height: 8px;

  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--fg-textinput-height);
  resize: none;
  margin-block-end: calc(var(--spacing-300) + var(--fg-counter-height));
  font-family: var(--body-font-family);
  font-weight: 400;
  color: var(--color-gray-800-variant);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  font-style: normal;
}

.font-generator-text-input .label::placeholder {
  color: var(--color-dark-gray);
}

.font-generator-text-input .counter-expander {
  position: absolute;
  bottom: -1px;
  right: 10px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.font-generator-text-input .character-count {
  color: var(--color-gray-800-variant);
  text-align: right;
  font-size: var(--Global-Typography-Size-Label-Label-XS);
  font-style: normal;
  font-weight: 400;
  line-height: var(--fg-counter-height); /* Force 8px height to match figma in place of unknown leading-trim and text-edge properties */
  white-space: nowrap;
}

.font-generator-text-input .resize-handle {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  cursor: se-resize;
  background: url('/express/code/icons/font-generator-resize-handle.svg') center / contain no-repeat;
}

.font-generator-text-input .suggestions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-300) 0 0;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--color-light-gray);
}

.font-generator-text-input .text-wrapper {
  display: flex;
  align-items: center;
  width: fit-content;
  font-family: var(--body-font-family);
  font-weight: 700;
  color: var(--color-black);
  font-size: 14px;
  line-height: 130%;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
  font-style: normal;
}

.font-generator-text-input .tags-fade {
  border-radius: 0 0 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

/* Fades are shown/hidden via .fade-left/.fade-right (toggled in JS based on
   scroll position), not unconditionally — a fade should only hint at more
   content on the side where there actually is more to scroll to. z-index
   lifts them above .tags-wrap regardless of DOM/paint order. */
.font-generator-text-input .tags-fade::before,
.font-generator-text-input .tags-fade::after {
  content: '';
  position: absolute;
  top: 0;
  width: 62px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
}

.font-generator-text-input .tags-fade::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-gray-100) 0%, rgba(248, 248, 248, 0.00) 63.48%);
}

.font-generator-text-input .tags-fade::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-gray-100) 0%, rgba(248, 248, 248, 0.00) 63.48%);
}

.font-generator-text-input .tags-fade.fade-left::before,
.font-generator-text-input .tags-fade.fade-right::after {
  opacity: 1;
}

.font-generator-text-input .tags-wrap {
  gap: var(--spacing-75);
  border-radius: 4px;
  /* Reserve room for the focus ring's -1px bleed (below) on every edge —
     without it, the ring gets clipped top/bottom, and left/right at the
     scroll extremes. */
  padding: 1px;
  overflow-x: scroll;
  /* Explicit, not left to default: setting overflow-x alone makes the spec
     compute overflow-y as auto (not visible), which without this would let
     the 1px ring bleed enable a spurious vertical scrollbar. */
  overflow-y: hidden;
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.font-generator-text-input .tags-wrap::-webkit-scrollbar {
  width: 0;
  display: none;
}

.font-generator-text-input .tag-pills {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.font-generator-text-input .tag-pills:focus-visible {
  outline: none;
}

.font-generator-text-input .tag-m {
  min-width: 27px;
  max-width: 200px;
  min-height: 32px;
  background-color: var(--color-light-gray);
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

/* Hover / active / focus all darken the fill; active adds the pill's own
   border, and focus adds the offset ring below. The two combine on their
   own (no separate "focus active" rule needed) when both apply at once —
   e.g. pressing Enter/Space while the pill has keyboard focus. "Active" here
   is the selected-pill state tracked in JS (.is-active), not the browser's
   :active (mouse-down) pseudo-class — the pill stays active until another
   pill is picked or the preview text is edited. */
.font-generator-text-input .tag-pills:hover .tag-m,
.font-generator-text-input .tag-pills.is-active .tag-m,
.font-generator-text-input .tag-pills:focus-visible .tag-m {
  background-color: var(--color-gray-300-variant);
}

.font-generator-text-input .tag-pills.is-active .tag-m {
  border-color: var(--Buttons-default);
}

.font-generator-text-input .tag-pills:focus-visible::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--Buttons-Down);
  border-radius: 9px;
  pointer-events: none;
}

.font-generator-text-input .tag-content {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-80);
  padding: 0 var(--spacing-200);
  border-radius: 8px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.font-generator-text-input .text-container {
  display: inline-flex;
  height: 32px;
  align-items: center;
  padding: 0;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.font-generator-text-input .div {
  display: -webkit-box;
  align-items: center;
  max-width: 100%;
  font-family: var(--body-font-family);
  font-weight: 400;
  color: var(--color-gray-800-variant);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  position: relative;
  letter-spacing: 0;
  font-style: normal;
}

.font-generator-text-input .img {
  position: absolute;
  top: -6px;
  right: 0;
  width: 62px;
  height: 45px;
}