/*
  Input
*/

input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]),
select,
textarea {
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--base-font-family);
  font-size: var(--input-font-size);
  padding: var(--input-padding);
  width: 100%;
}

label {
  font-size: var(--label-font-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
}

input[aria-invalid] {
  border: var(--input-border-invalid);
}

input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}

textarea:not([rows]) {
  min-height: 10em;
}

[hidden] {
  display: none !important;
}

/* Input with a container */
.u-input-container {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: var(--space-xs);
}

.u-input-container:has(input)  {
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  width: 100%;
}

.u-input-container:has(input:focus)  {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}

.u-input-container label:has(svg) {
  display: inline-flex;
  line-height: 1;
}

.u-input-container input {
  border: none;
  padding: 0;
}

.u-input-container input:focus {
  outline: none;
}