@layer components {
  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  }

  /* Form fields: label + control + hint
   *
   *   <div class="field">
   *     <label class="field__label field__label--required">Valor</label>
   *     <input class="input">
   *   </div>
   */
  .field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .field__label {
    color: var(--color-ink-darker);
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
  }

  .field__label--required::after {
    color: var(--color-primary-500);
    content: "*";
    font-weight: 500;
    margin-inline-start: 0.25rem;
  }

  .field__label--optional::after {
    color: var(--color-ink-dark);
    content: "(opcional)";
    font-size: var(--text-x-small);
    font-weight: 500;
    margin-inline-start: 0.25rem;
  }

  /* Validation message injected after invalid fields (config/initializers/form_errors.rb) */
  .field__error {
    color: var(--color-danger-500);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    margin-block-start: 0.25rem;
  }

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

    /* The validation message goes under the picture instead of on top of it,
       with room kept for it below the picker. */
    &:has(> .field__error) {
      margin-block-end: 2.75rem;
      position: relative;
    }

    > .field__error {
      inline-size: max-content;
      inset-block-start: calc(100% + 0.25rem);
      inset-inline-start: 50%;
      max-inline-size: 30ch;
      position: absolute;
      text-align: center;
      translate: -50% 0;
    }

    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;

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