/* ModalInput - StreamYard style text input */

.container {
  width: 100%;
  position: relative;
}

.label {
  display: block;
  color: #5f6368;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
}

.input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  color: #202124;
  background-color: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.input:hover {
  border-color: #bdc1c6;
}

.input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}

.input::placeholder {
  color: #80868b;
}

.counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #5f6368;
  font-size: 12px;
  pointer-events: none;
}

/* Dark mode */
[data-theme="dark"] .label {
  color: #9aa0a6;
}

[data-theme="dark"] .input {
  background-color: #3c4043;
  border-color: #5f6368;
  color: #e8eaed;
}

[data-theme="dark"] .input:hover {
  border-color: #80868b;
}

[data-theme="dark"] .input:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 1px #8ab4f8;
}

[data-theme="dark"] .input::placeholder {
  color: #9aa0a6;
}

[data-theme="dark"] .counter {
  color: #9aa0a6;
}