:root {
  --color-input-bg: var(--color-bg);
  --color-input-border: var(--color-text);
  --input-border-size: 2px;
}

.field {
  display: flex;
  flex-direction: column;
}

.field__label {
  margin-bottom: var(--size-2);
  font-size: var(--scale-0);
  font-weight: var(--weight-light);
}

weav-field:has(
    .field__input[required],
    input[required],
    select[required]
  )::part(label)::after,
.field:has([required]) .field__label::after,
.field:has(.field__input[required], input[required]) .field__label::after {
  content: " *";
  color: var(--color-red);
}

.field__input,
.field ::slotted(select),
.field ::slotted(input:not([type="submit"])) {
  width: 100%;
  background-color: var(--color-input-bg);
  border: var(--input-border-size) solid var(--color-input-border);
  padding: var(--size-3);
  font-size: var(--size-0);
  line-height: 1.2;
  outline-width: 0;
  appearance: none;
  color: var(--color-text);
  -webkit-appearance: none;
  caret-color: var(--color-text);
}
.field__input:focus,
.field ::slotted(input:not([type="submit"]):focus) {
  outline-width: 0;
  outline: none;
}

.field.has-error .field__input,
.field.has-error input,
.field.has-error select {
  border-color: var(--color-red);
}

.field__error {
  display: none;
  margin-top: var(--size-2);
  font-size: var(--scale-00);
  color: var(--color-error);
}
.field.has-error .field__error {
  display: block;
}

.field ::slotted(input[disabled]) {
  opacity: 0.4;
}