@layer components {
  /* Text inputs */
  .input {
    accent-color: var(--input-accent-color, var(--color-ink));
    background-color: var(--input-background, transparent);
    border-radius: var(--input-border-radius, 0.5em);
    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
    color: var(--input-color, var(--color-ink));
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: inherit;
    max-inline-size: 100%;
    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-ink);
      -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
    }

    &:where(:focus) {
      --focus-ring-offset: -1px;
    }

    &[readonly] {
      --focus-ring-size: 0;
    }

    &[autocomplete='one-time-code'] {
      --input-spacing: 0.5em;

      font-family: var(--font-mono);
      font-size: var(--text-large);
      font-weight: 900;
      inline-size: 18ch;
      letter-spacing: 1ch;
      min-inline-size: 18ch;
      text-align: center;
    }

    &[type='number'] {
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    /* Target mobile Safari only */
    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
      @media (hover: none) {
        font-size: max(16px, 1em) !important;
      }
    }
  }

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

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

    img {
      border-radius: 0.4em;
    }

    input[type="file"] {
      --hover-size: 0;
      --input-border-color: transparent;
      --input-border-radius: 8px;

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

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

    &:has(input[type="file"]:focus),
    &:has(input[type="file"]:focus-visible) {
      outline: 0.15rem solid var(--color-selected-dark);
    }

    &:is(.avatar) {
      input[type="file"] {
        border-radius: 50%;
      }
    }
  }

  .input--select {
    --input-border-radius: 2em;
    --input-padding: 0.5em 1.8em 0.5em 1.2em;
    --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
    --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");

    -webkit-appearance: none;
    appearance: none;
    background-image: var(--caret-icon);
    background-size: 0.5em;
    background-position: center right 0.9em;
    background-repeat: no-repeat;
    text-align: start;

    html[data-theme="dark"] & {
      --caret-icon: var(--caret-icon-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --caret-icon: var(--caret-icon-dark);
      }
    }

    option {
      background-color: var(--color-canvas);
      color: var(--color-ink);
    }
  }

  .input--textarea {
    --input-padding: 0;

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

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

  .input--invisible {
    background-color: transparent;
    block-size: 5px;
    border: none;
    inline-size: 5px;
    opacity: 0.1;

    &:focus {
      outline: none;
    }
  }

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

    &:focus-within {
      --input-border-color: var(--color-selected-dark);

      outline: var(--focus-ring-size) solid var(--focus-ring-color);
    }

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

      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-selected) inset;
    }
  }

  .input--hidden {
    block-size: 0;
    inline-size: 0;
    opacity: 0;
    padding: 0;
  }
}