@layer components {
  /* Text inputs */
  .input {
    accent-color: var(--input-accent-color, var(--color-ink));
    background-color: var(--input-background, transparent);
    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-light));
    border-radius: var(--input-border-radius, 0.5em);
    color: var(--input-color, var(--color-ink));
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: 1.2;
    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(:not(:active)):focus {
      --input-border-color: var(--color-selected-dark);
      --hover-color: var(--color-selected-dark);
      --outline-size: 0;
      --outline-color: transparent;

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

    &:disabled {
      pointer-events: none;
    }
  }

  .input--subtle {
    --input-border-color: var(--color-ink-lighter);
  }

  .input--borderless {
    --hover-size: 0;
    --input-border-size: 0;
  }

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

    &:focus {
      outline: none;
    }
  }

  .input--underlined {
    border-block-end: 2px dashed var(--color-ink-light);
    padding-block-end: var(--block-space-quarter);
    padding-inline: 0;
    transition: border-color 300ms ease;

    &:focus-visible {
      border-block-end-color: var(--color-ink);
    }
  }

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

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

    img {
      border-radius: 0.4em;
    }

    input[type="file"] {
      --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;
      }

      &:focus,
      &:focus-visible {
        --input-border-color: var(--color-selected-dark);
        --input-border-radius: 8px;
        --input-border-size: 0.15rem;
      }
    }
  }

  .input--textarea {
    --input-padding: 0.5em;
    line-height: 1.4;
    min-block-size: calc(4lh + (2 * var(--input-padding)));
    min-inline-size: 100%;
    overflow-y: scroll;

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

    trix-toolbar {
      position: sticky;
      top: 0;
      padding-bottom: calc(0.5 * var(--input-padding));
      margin-block-end: var(--block-space-half);
      border-bottom: 1px solid var(--color-ink-lighter);
      border-radius: 0;
    }
  }

  .input--resizeable {
    resize: vertical;
  }

  .input--search {
    --input-border-radius: 2em;
    --input-border-color: var(--color-ink-lighter);
  }

  .input--select {
    appearance: none;
    background-image: url("caret-down.svg");
    background-repeat: no-repeat;
    background-position: right 0.8em top 50%;
    background-size: 0.65rem auto;
  }

  label:has(.input--radio) {
    display: grid;
    grid-template-columns: 1.2em auto;
    gap: 0.6em;
  }

  .input--radio {
    appearance: none;
    aspect-ratio: 1;
    border: 0.1em solid var(--color-theme);
    border-radius: 50%;
    color: currentColor;
    display: grid;
    margin: 0;
    padding: 0;
    place-content: center;
    transform: translateY(0.1em);

    &::before {
      background-color: var(--color-theme); /* Windows High Contrast Mode */
      block-size: 0.75em;
      border-radius: 50%;
      content: "";
      inline-size: 0.75em;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
    }

    &:checked::before {
      transform: scale(0.5);
    }
  }

  /* Checkboxes */
  .checkbox {
    display: flex;
    cursor: pointer;
    gap: 0.5ch;
    inline-size: fit-content;
  }

  .checkbox__input {
    appearance: none;
    opacity: 0;
    position: absolute;
    z-index: -1;

    &:checked {
      + .checkbox__button {
        background-color: var(--color-theme);
        border-color: var(--color-theme);
      }

      + .checkbox__button:after {
        background: url("check.svg") no-repeat center / 60%;
        filter: invert(1);

        @media (prefers-color-scheme: dark) {
          filter: invert(0);
        }
      }
    }

    &:focus,
    &:focus-visible {
      + .checkbox__button {
        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
      }
    }
  }

  .checkbox__button {
    --checkbox-size: 1lh;
    block-size: var(--checkbox-size);
    border: 1px solid var(--color-ink-light);
    border-radius: 25%;
    inline-size: var(--checkbox-size);
    position: relative;

    &:after {
      content: "";
      inset: 0;
      position: absolute;
    }
  }

  /* Switches */
  .switch {
    block-size: 1.75em;
    border-radius: 2em;
    display: inline-flex;
    inline-size: 3em;
    position: relative;

    &:has(:focus-visible) {
      .switch__btn {
        box-shadow:
          0 0 0 var(--outline-size) var(--color-body),
          0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
      }
    }
  }

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

  .switch__btn {
    background-color: var(--color-ink-light);
    border-radius: 2em;
    cursor: pointer;
    inset: 0;
    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;
    }

    .switch__input:disabled + & {
      background-color: var(--color-ink-light) !important;
      cursor: not-allowed;
    }

    .switch__input:checked + & {
      background-color: var(--color-theme);

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

  /* 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-selected-dark);
      --hover-color: var(--color-selected-dark);
      --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-selected) inset;
    }

    &:has(.input--underlined) {
      border-radius: var(--input-border-radius, 0.33em);
      padding: var(--block-space) var(--inline-space) calc(var(--block-space) - var(--block-space-quarter));
    }
  }
}