/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the pantry's notifications adds on top of styles.css, written with the tokens of design-system.css and never
 * with values of its own. The tests read this file with the others: a rule written twice anywhere,
 * a token used and not defined, a design system token written again, all fail.
 */

.notif-box { display: flex; flex-direction: column; gap: var(--space-3); }

.notif-section { display: flex; flex-direction: column; gap: var(--space-2); }

.notif-choices { display: flex; flex-direction: column; gap: var(--space-2); }

.notif-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.notif-choice:active:not(:disabled) { transform: scale(0.99); }
.notif-choice:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.notif-choice[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.notif-choice:disabled { cursor: default; opacity: 0.6; }
.notif-choice__name { font-weight: var(--fw-medium); }
.notif-choice__text { font-size: var(--fs-body-sm); color: var(--text-muted); }

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notif-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.notif-member__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }