fizzy/app/assets/stylesheets/inputs.css

@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;
    }
  }

  .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;
      }

      &:focus,
      &:focus-visible {
        .input--file:has(&) {
          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;

    -webkit-appearance: none;
    appearance: none;
    background-image: 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");
    background-size: 0.5em;
    background-position: center right 0.9em;
    background-repeat: no-repeat;
    text-align: start;

    @media (prefers-color-scheme: dark) {
      background-image: 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");
    }

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

  /* 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:disabled + & {
      --switch-color: var(--color-ink-medium) !important;

      cursor: not-allowed;
    }

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

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

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

  .input.boost__input {
    --input-border-radius: 0;
    --input-border-size: 0;
    --input-padding: 0;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    inline-size: min-content;
    max-inline-size: 3ch;
    min-inline-size: 1ch;
    outline: none;

    @supports (field-sizing: content) {
      field-sizing: content;
      max-inline-size: unset;
    }

    &:focus {
      background-color: var(--color-highlight);
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}