/* Text inputs */
.input {
  accent-color: var(--input-accent-color, var(--color-text));
  background-color: var(--input-background, transparent);
  border-radius: var(--input-border-radius, 0);
  border: var(--input-border-size, 1px) solid
    var(--input-border-color, var(--color-border-darker));
  color: var(--input-color, var(--color-text));
  font-size: max(16px, 1em);
  inline-size: 100%;
  line-height: 1.2;
  padding: var(--input-padding, 0.5em 0.8em);
  resize: none;

  &:autofill,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-highlight) inset;
  }

  &:where(:not(:active)):focus {
    --input-border-color: var(--color-highlight);
    --hover-color: var(--color-highlight);
    --outline-size: 0;
    --outline-color: transparent;

    filter: var(--hover-filter);
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }
}

.input--file {
  border: 0;
  cursor: pointer;
  display: grid;
  inline-size: auto;
  place-items: center;

  > * {
    grid-area: 1/1;
  }

  input[type="file"] {
    --input-border-color: transparent;

    block-size: 100%;
    cursor: pointer;
    font-size: 0;
    inline-size: 100%;
    overflow: clip;

    &::file-selector-button {
      appearance: none;
      cursor: pointer;
      opacity: 0;
    }

    &:focus,
    &:focus-visible {
      --input-border-color: var(--color-highlight);
      --input-border-size: 0.15rem;
    }
  }
}

.input--textarea {
  --input-padding: 0.5em;

  line-height: 1.1;
  min-block-size: calc(4lh + (2 * var(--input-padding)));
  min-inline-size: 100%;
  padding-block: var(--input-padding);
  padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));

  @support (field-sizing: content) {
    field-sizing: content;
    max-block-size: calc(10lh + (2 * var(--input-padding)));
    min-block-size: calc(1lh + (2 * var(--input-padding)));
  }
}

/* Containers that act like (and contain) inputs */
.input--actor {
  transition:
    box-shadow 150ms ease,
    outline-offset 150ms ease;

  &:focus-within {
    --input-border-color: var(--color-highlight);
    --hover-color: var(--color-highlight);
    --outline-size: 0;

    filter: var(--hover-filter);
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }

  .input {
    --input-padding: 0;
    --input-border-radius: 0;
    --input-background: transparent;
    --input-border-size: 0;
    --hover-size: 0;
    --outline-size: 0;
    --outline-color: transparent;

    inline-size: 100%;
    outline: 0;
  }

  &:has(
      .input:is(
          :autofill,
          :-webkit-autofill,
          :-webkit-autofill:hover,
          :-webkit-autofill:focus
        )
    ) {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-highlight) inset;
  }
}