/* Reply Later / Set Aside toggles and the Snooze picker on the thread's
   action bar, plus the date badge used on Snoozed. */

.topic-toolbar__form { display: contents; }
button.topic-toolbar__action { flex: 0 0 104px; min-width: 0; border: none; background: none; font-family: inherit; cursor: pointer; }
.topic-toolbar__action--on, button.topic-toolbar__action--on { background: var(--color-sheet); color: #3072dd; }

.snooze { position: relative; }
.snooze--tile { flex: 1; display: flex; }
.snooze > summary { list-style: none; cursor: pointer; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze--tile > summary { width: 100%; }
.snooze--tile[open] > summary { background: var(--color-sheet); color: var(--color-accent); }

.snooze__menu { top: auto; right: auto; bottom: calc(100% + 16px); left: 50%; translate: -50% 0; max-height: 70vh; overflow-y: auto; }
.snooze--badge .snooze__menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; translate: none; }

.snooze__intro { margin: 0 0 8px 8.9px; font-size: 15.4px; line-height: 21.56px; opacity: 0.85; }
.snooze__choice { position: relative; }
/* "Snooze until…" with its Zzz, the one place the menu says Snooze */
.snooze__title { display: flex; align-items: center; gap: 6px; }
.snooze__title-icon { width: 15px; height: 15px; flex: none; color: var(--color-accent); }
.snooze__hint { position: absolute; right: 12px; top: 50%; translate: 0 -50%; opacity: 0.6; font-weight: 400; }

.snooze__picker { display: grid; gap: 9.6px; margin: 0; }
.snooze__picker[hidden] { display: none; }
/* Rows and their forms set their own display, which would beat [hidden] */
.snooze__menu [hidden] { display: none; }

/* "Schedule this to Circle Back", measured on the reference's */
.snooze__submit {
  padding: 4.62px 12.32px;
  border: none;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font: 500 15.4px/23.56px var(--font);
  cursor: pointer;
}

.snooze__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 3.96px 10.56px 3.96px 29.04px;
  /* A neutral pill with the clock in the blue, like the other pills */
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  color: var(--color-ink);
  font-size: 13.2px;
  font-weight: 500;
  white-space: nowrap;
}

.snooze__badge-icon { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--color-accent); }

/* Composer: "Now and Snooze if no reply…" */
.send-snooze { width: 418px; }
.send-snooze .calendar { margin-bottom: 14px; }