.text-field {
  display: block;
  width: 100%;
  padding: 0.35rem 0.75rem;
  color: var(--color-gray-800);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.2s, border 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--color-white);

  &:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 0 0 3px rgba(37, 99, 235, 0.25);
  }

  &:disabled {
    color: var(--color-gray-500);
    cursor: not-allowed;
    background: var(--color-gray-100);
  }
}

.text-field--modal {
  border-color: var(--color-yellow-300);
  background: var(--color-yellow-50);
  color: #000;

  &:focus {
    border-color: var(--color-orange-500);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 0 0 3px rgba(249, 115, 22, 0.25);
  }
}

.text-field--icon-prefix {
  padding-left: 1.75rem;
}

.text-field--no-right-rounded-corners {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.select-wrapper {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.select-field {
  display: block;
  width: 100%;
  grid-column-start: 1;
  grid-row-start: 1;
  appearance: none;
  padding: 0.35rem 0.75rem;
  color: var(--color-gray-800);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.2s, border 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--color-white);

  &:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 0 0 3px rgba(37, 99, 235, 0.25);
  }

  &:disabled {
    color: var(--color-gray-500);
    cursor: not-allowed;
    background: var(--color-gray-100);
  }
}

.text-area {
  display: block;
  width: 100%;
  padding: 0.35rem 0.75rem;
  color: var(--color-gray-800);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.2s, border 0.15s;
  background: var(--color-white);
  resize: vertical;
  font-family: monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;

  &:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 0 0 3px rgba(37, 99, 235, 0.25);
  }

  &:disabled {
    color: var(--color-gray-500);
    cursor: not-allowed;
    background: var(--color-gray-100);
  }
}

.text-area--modal {
  padding: 0.5rem;
  border-color: var(--color-yellow-300);
  background: var(--color-yellow-50);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  &:focus {
    border-color: var(--color-orange-500);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 0 0 3px rgba(249, 115, 22, 0.25);
  }
}