@layer components {
  /* Menu form - form elements styled like menu buttons
  /* ------------------------------------------------------------------------ */

  .menu-form {
    align-items: flex-start;
    background-color: var(--menu-form-background, var(--color-ink-lighter));
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: 0.75rem 1rem;
  }

  .menu-form__title {
    font-size: var(--text-normal);
    font-weight: 600;
  }

  .menu-form__row {
    align-items: center;
    align-self: stretch;
    display: grid;
    gap: 1ch;
    grid-template-columns: auto 1fr;
  }

  .menu-form__row .label {
    margin-block-end: 0;
  }

  .menu-form > .btn {
    align-self: flex-end;
  }

  /* Stack on mobile */
  @media (max-width: 639px) {
    .menu-form__row {
      grid-template-columns: 1fr;
    }
  }

  /* Color variants */
  .menu-form--blue {
    --menu-form-background: var(--color-blue-lightest);
  }
}