input:not(
    [type="date"],
    [type="time"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="checkbox"]
  ),
textarea,
select {
  display: block;
}

input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-meridiem-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field {
  padding: 0;
}

input[type="datetime-local"]::-webkit-inner-spin-button {
  height: auto;
}

input[type="datetime-local"].text-field {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

input[type="datetime-local"].text-field {
  -webkit-appearance: none;
}

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

  &::placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
  }

  &:focus {
    outline: none;
    border-color: light-dark(#2563eb, var(--color-blue-400));
    box-shadow: inset 0 1px 2px
        light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
      0 0 0 3px light-dark(rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.25));
  }

  &:disabled {
    color: light-dark(var(--color-gray-500), var(--color-zinc-400));
    cursor: not-allowed;
    background: light-dark(var(--color-gray-100), var(--color-zinc-900));
  }
}

.text-field--modal {
  border-color: light-dark(var(--color-yellow-300), var(--color-orange-600));
  background: light-dark(var(--color-yellow-50), var(--color-zinc-800));
  color: light-dark(#000, var(--color-zinc-100));

  &::placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
  }

  &:focus {
    border-color: light-dark(var(--color-orange-500), var(--color-orange-400));
    box-shadow: inset 0 1px 2px
        light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
      0 0 0 3px light-dark(rgba(249, 115, 22, 0.25), rgba(251, 146, 60, 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: light-dark(var(--color-gray-800), var(--color-zinc-100));
  border: 1px solid light-dark(rgba(0, 0, 0, 0.25), var(--color-zinc-600));
  border-radius: 6px;
  box-shadow: inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
  transition: box-shadow 0.2s, border 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: light-dark(var(--color-white), var(--color-zinc-700));

  &::placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
  }

  &:focus {
    outline: none;
    border-color: light-dark(#2563eb, var(--color-blue-400));
    box-shadow: inset 0 1px 2px
        light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
      0 0 0 3px light-dark(rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.25));
  }

  &:disabled {
    color: light-dark(var(--color-gray-500), var(--color-zinc-400));
    cursor: not-allowed;
    background: light-dark(var(--color-gray-100), var(--color-zinc-900));
  }
}

.select-field--modal {
  border-color: light-dark(var(--color-yellow-300), var(--color-orange-600));
  background: light-dark(var(--color-yellow-50), var(--color-zinc-800));
  color: light-dark(#000, var(--color-zinc-100));

  &::placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
  }

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

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

  &::placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
  }

  &:focus {
    outline: none;
    border-color: light-dark(#2563eb, var(--color-blue-400));
    box-shadow: inset 0 1px 2px
        light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
      0 0 0 3px light-dark(rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.25));
  }

  &:disabled {
    color: light-dark(var(--color-gray-500), var(--color-zinc-400));
    cursor: not-allowed;
    background: light-dark(var(--color-gray-100), var(--color-zinc-900));
  }
}

.text-area--modal {
  padding: 0.5rem;
  border-color: light-dark(var(--color-yellow-300), var(--color-orange-600));
  background: light-dark(var(--color-yellow-50), var(--color-zinc-800));
  box-shadow: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));

  &::placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
    opacity: 1;
  }
  &::-moz-placeholder {
    color: light-dark(var(--color-gray-600), var(--color-zinc-500));
  }

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