/* Shared text boxes of the modals and the game menu (see theme.css): translucent dark box with the accent border on focus */
/* Reference look: the Quest Log and Party searches. Boxes with the "clearable" class get a clear button (text-field.js) */
.modal input.text-field,
.modal textarea.text-field {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 11px;
  color: white;
  user-select: text;
  outline: none;
  border: 1px solid black;
  border-radius: 6px;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal textarea.text-field {
  display: block;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  scrollbar-width: thin;
}

.modal .text-field::placeholder {
  color: var(--color-text-muted);
  font-weight: normal;
}

.modal .text-field:focus {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 4px var(--color-accent-glow);
}

.modal .text-field.invalid {
  border-color: var(--color-error);
}

/* Boxes with an icon inside their left end (e.g., every search box and the private message name): the box gets the
   "with-icon" class and sits in a div.text-field-icon-wrapper after a span.material-icons.text-field-icon */
.modal input.text-field.with-icon {
  padding-left: 32px;
}

.text-field-icon-wrapper {
  position: relative;
  min-width: 0;
}

/* Above the box: its wrapper is positioned too (clear button) */
.text-field-icon {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color 0.15s;
}

.text-field-icon-wrapper:focus-within .text-field-icon {
  color: var(--color-accent);
}

/* Wrapper of a clearable box: the clear button sits inside the right end of the box */
.text-field-box {
  position: relative;
  display: block;
  min-width: 0;
}

/* Boxes with their own look keep their size (e.g., the book text): inputs keep their text centered between both ends */
.text-field-box.inline {
  display: inline-block;
  vertical-align: middle;
}

.modal .text-field-box > input.clearable {
  padding-right: 28px;
}

.modal .text-field-box.inline > input.clearable {
  padding-right: 22px;
  padding-left: 22px;
}

.modal .text-field-box.multiline > textarea.clearable {
  padding-right: 28px;
}

.text-field-box > button.text-field-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  border: none;
  border-radius: 50%;
  background: none;
  transform: translateY(-50%);
}

.text-field-box.inline > button.text-field-clear {
  right: 3px;
}

/* Multiline boxes keep the button in their top right corner */
.text-field-box.multiline > button.text-field-clear {
  top: 6px;
  right: 10px;
  transform: none;
}

.text-field-box > button.text-field-clear:hover {
  color: var(--color-accent);
  border: none;
  background: rgba(0, 0, 0, 0.4);
}

/* Only shown while the box has text (the placeholder is hidden) and can be edited */
.text-field-box > .clearable:placeholder-shown + button.text-field-clear,
.text-field-box > .clearable:disabled + button.text-field-clear,
.text-field-box > .clearable[readonly] + button.text-field-clear {
  display: none;
}

/* The browser's own password reveal button (Edge) would sit under the clear button */
.text-field-box > input.clearable::-ms-reveal {
  display: none;
}

.text-field-clear svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}