/* Shared components: buttons, round buttons, the floating +, badge, dropdowns, tappable text links,
   section headings and form sections. */

/* Buttons */

.button {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* A link styled as a button ("Try again" on the offline page) */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button--primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: transparent;
}

.button--small {
  min-height: var(--control-size-small);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-callout);
}

.button--danger { color: var(--color-danger); }

.button--block { width: 100%; }

.link-button {
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Round buttons: a circle centred in the full tap area (the transparent border). Grey with an
   accent-coloured icon, or --filled in the accent colour. */
.circle-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap-size);
  height: var(--tap-size);
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  text-decoration: none;
  background: var(--color-surface);
  background-clip: padding-box;
  border: calc((var(--tap-size) - var(--circle-size)) / 2) solid transparent;
  border-radius: 50%;
  cursor: pointer;

  .icon { width: 1.25rem; height: 1.25rem; }
  &:disabled { color: var(--color-disabled); cursor: default; }
  &:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -0.375rem; }
}

/* Smaller circle in a 2rem row ("Bought already"): the tap area overlaps the rows around it instead of
   making the row taller */
.circle-button--small {
  --circle-size: var(--circle-size-small);
  margin-block: calc((2rem - var(--tap-size)) / 2);

  .icon { width: 0.8125rem; height: 0.8125rem; }
}

.circle-button--filled { color: var(--color-on-accent); background-color: var(--color-accent); }
.circle-button--danger { color: var(--color-danger); }

/* Floating + (plan mode), bottom right of the content column */
.fab {
  position: fixed;
  z-index: 5;
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--space-4), calc((100vw - var(--page-width)) / 2 + var(--space-3)), env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
  cursor: pointer;

  .icon { width: 1.5rem; height: 1.5rem; }
  &:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
}

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-subhead);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: 999px;
}


/* A small dialog in the middle of the screen (the iOS "Add to Home Screen" explanation) */
.dialog {
  width: min(20rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  color: var(--color-text);
  background: light-dark(var(--color-bg), var(--color-surface)); /* raised above the black page in dark mode */
  border: 0;
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);

  h2 { margin: 0 0 var(--space-2); font-size: var(--font-body); }
  p { margin: 0 0 var(--space-4); }
  .icon { width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; color: var(--color-accent); }
  &::backdrop { background: rgb(0 0 0 / 0.35); }
}


/* Dropdown panels of the header's <details> menus */

.dropdown {
  position: absolute;
  z-index: 10;
  margin-block-start: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}

.dropdown__actions {
  display: flex;
  flex-direction: column;
}

/* Text links and link-buttons in menus and lists: a full-height tap target, no underline */
.dropdown__actions :is(a, .link-button), .directory__actions a, .add-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  text-decoration: none;
}

/* "Add list" (switcher and /lists): a small filled round + in front of the text */
.add-link {
  gap: var(--space-2);

  .add-link__icon {
    display: grid;
    place-items: center;
    width: var(--circle-size-small);
    height: var(--circle-size-small);
    color: var(--color-on-accent);
    background: var(--color-accent);
    border-radius: 50%;

    .icon { width: 0.8125rem; height: 0.8125rem; }
  }
}


/* Sections */

/* Small uppercase heading: "Everyday items", "Other items", "Bought already", "My lists" */
.section-heading {
  margin: 0 0 var(--space-1);
  font-size: var(--font-footnote);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* A divider above a section of a page or form, with a small bold heading: "Change password" (profile),
   "Add person" (Share list), the Delete list button (Edit list) */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);

  h2 { margin: 0; font-size: var(--font-body); }
}

/* Inside a .form, its gap already adds space above */
.form > .form-section { margin-block-start: calc(var(--space-4) - var(--space-3)); }