@layer components {
  /* Text inputs */
  .input {
    --chamfer: var(--input-chamfer, var(--chamfer-small));
    --input-border-color: var(--color-ink-light);

    accent-color: var(--input-accent-color, var(--color-ink));
    background-color: var(--input-background, var(--color-surface));
    border-radius: var(--input-border-radius, var(--radius));
    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);
    font-weight: 500;
    inline-size: 100%;
    line-height: inherit;
    max-inline-size: 100%;
    padding: var(--input-padding, var(--block-space-half) 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;
    }

    clip-path: var(--chamfer-clip);

    &:where(:focus-visible) {
      box-shadow: inset 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
      outline: none;
    }

    &[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;
      }
    }

    /* Bare file inputs: dress the native picker button like a system button */
    &[type="file"] {
      color: var(--color-ink-dark);

      &::file-selector-button {
        appearance: none;
        background-color: var(--color-surface);
        border: none;
        color: var(--color-ink);
        font-family: var(--font-display);
        font-size: var(--text-x-small);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
    }

    &::placeholder {
      color: var(--color-ink-dark);
    }

    /* 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,
  .input--upload {
    cursor: pointer;

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

    input[type="file"] {
      --hover-size: 0;
      --input-border-color: transparent;
      --input-border-radius: var(--radius);

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

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

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

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

    img {
      border-radius: var(--radius);
    }

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

  .input--upload {
    --btn-border-color: var(--color-ink);
    --btn-border-radius: var(--radius);

    border-style: dashed;
    position: relative;

    input[type="file"] {
      inset: 0;
      outline: none;
      position: absolute;
    }
  }

  .input--select {
    --input-border-radius: var(--radius);
    --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-surface);
      color: var(--color-ink);
    }

    hr {
      border: 0;
      border-block-start: 1px dotted var(--color-ink-light);
      margin-block: var(--block-space-half);
    }

    option.select-option--no-walkthrough {
      border-block-start: 1px dotted var(--color-ink-light);
    }
  }

  /* A select that reads as a line of text with a caret until hovered or
     focused. Fits its current value; the blank option reads muted. */
  .input--quiet {
    --input-background: transparent;
    --input-border-color: transparent;
    --input-padding: 0 1.6em 0 0.4em;

    background-position: center right 0.4em;
    field-sizing: content;
    font-weight: 400;
    inline-size: auto;

    &:has(option[value=""]:checked) {
      color: var(--color-ink-medium);
    }

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        --input-border-color: var(--color-ink-light);
      }
    }

    &:focus-visible {
      --input-border-color: var(--color-ink-medium);
    }
  }

  /* min-inline-size stays 0 so a textarea can flex-shrink next to a sibling
     button (the comment composer) instead of pushing it out of the panel. */
  .input--textarea {
    --input-padding: var(--block-space-half);
    --textarea-max-block-size: 8lh;
    --textarea-min-block-size: 2lh;

    border-color: var(--color-ink-light);
    line-height: inherit;
    min-block-size: calc(
      var(--textarea-min-block-size) + (2 * var(--input-padding))
    );
    min-inline-size: 0;
    overflow-y: auto;
    padding-block: var(--input-padding);
    padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &::placeholder {
      color: var(--color-ink-dark);
    }

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

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

    &:focus {
      outline: none;
    }
  }

  /* Switches */
  .switch {
    --switch-color: var(--color-ink-medium);
    --switch-hover-brightness: 0.9;

    block-size: 1.75em;
    border-radius: 2em;
    display: inline-flex;
    inline-size: 3em;
    position: relative;

    &:has(:focus-visible) {
      .switch__btn {
        outline: var(--focus-ring-size) solid var(--focus-ring-color);
      }
    }
  }

  .switch__input {
    block-size: 0;
    inline-size: 0;
    opacity: 0.1;
  }

  .switch__btn {
    background-color: var(--switch-color);
    border-radius: 2em;
    cursor: pointer;
    inset: 0;
    outline-offset: var(--focus-ring-offset);
    position: absolute;
    transition: 150ms ease;

    &::before {
      background-color: var(--color-ink-inverted);
      block-size: 1.35em;
      border-radius: 50%;
      content: "";
      inline-size: 1.35em;
      inset-block-end: 0.2em;
      inset-inline-start: 0.2em;
      position: absolute;
      transition: 150ms ease;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(
          in srgb,
          var(--switch-color) 80%,
          var(--color-ink)
        );
      }
    }

    .switch__input:checked + & {
      --switch-color: var(--color-primary);

      &::before {
        transform: translateX(1.2em);
      }
    }

    .switch__input:disabled + & {
      --switch-color: var(--color-ink-medium);

      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* 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;

      &:focus-visible {
        box-shadow: none;
      }
    }

    &:has(
      .input:is(
        :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;
    }
  }

  .input--search {
    align-items: center;
    display: grid;
    gap: 0.5em;
    grid-template-columns: auto minmax(0, 1fr) auto;

    .input--search__icon {
      color: var(--color-ink-medium);
    }

    .input[type="search"] {
      appearance: none;

      &::-webkit-search-cancel-button {
        appearance: none;
      }
    }

    .input--search__clear {
      --btn-border-size: 0;
      --btn-size: 1.5em;
      --icon-size: 1.25em;
    }

    &:has(.input:placeholder-shown) .input--search__clear {
      pointer-events: none;
      visibility: hidden;
    }
  }

  .input--composer {
    --composer-action-size: calc(2.25 * var(--text-x-small));

    align-items: end;
    display: grid;
    gap: 0.5em;
    grid-template-columns: minmax(0, 1fr) auto;

    /* A single line is centered against the action buttons; longer text grows
       upward and the buttons stay aligned to the last line. */
    .input--textarea {
      min-block-size: var(--composer-action-size);
      padding-block: calc((var(--composer-action-size) - 1lh) / 2);
    }

    .input--composer__action {
      --btn-size: var(--composer-action-size);
      --icon-size: 1.1em;
    }

    .input--composer__actions {
      align-items: center;
      column-gap: var(--inline-space);
      display: flex;
    }

    .input--composer__send {
      --btn-padding: 0 1.1em;

      block-size: var(--btn-size);
    }

    /* Actions stay hidden on an empty, unfocused new-comment box. Typed text
       or selected images keep them visible after focus leaves. */
    &:not(:focus-within):has(.input--textarea:placeholder-shown):not(
        :has(~ .image-previews .image-preview)
      ) {
      grid-template-columns: minmax(0, 1fr);

      .input--composer__actions {
        display: none;
      }
    }
  }

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

  /* Checkboxes */
  .checkbox {
    appearance: none;
    aspect-ratio: 1;
    background-color: var(--checkbox-bg, var(--color-surface));
    block-size: 1em;
    border: 1px solid var(--checkbox-border-color, var(--color-ink-light));
    border-radius: var(--radius);
    color: var(--checkbox-color, currentColor);
    display: grid;
    font: inherit;
    inline-size: 1em;
    margin: 0;
    place-content: center;

    &::before {
      block-size: 0.65em;
      border: solid currentColor;
      border-width: 0 0.12em 0.12em 0;
      content: "";
      inline-size: 0.3em;
      opacity: 0;
      transform: translateY(-0.06em) rotate(40deg);
    }

    &:checked::before {
      opacity: 1;
    }

    &:where([disabled]):not(:hover):not(:active) {
      filter: none;
      opacity: 0.5;
    }
  }

  .checkbox--success {
    --checkbox-color: var(--color-surface);

    &:checked {
      --checkbox-bg: var(--color-positive);
      --checkbox-border-color: var(--color-positive);
    }
  }
}