/* Templates */
/* --------- */
/*
  The "Show Templates" dialog - a plain list to pick one to use, edit, or delete,
  opened from the icon beside the Add Event dialog's colour tag (see
  gear/calendar/_event_form and gear/event_templates/index). A second .calendar-sheet,
  not a panel inside the first, so it takes that shell's own look for free - except
  two paddings sized for that fuller dialog rather than this plain list: the shared
  shell's own .calendar-sheet__content (1.125rem a side) and .modal-body's stock
  Bootstrap 1rem stack on top of each other, which is where the excess actually was.
*/

dialog.pg-modal.calendar-templates-sheet .calendar-sheet__content {
  padding: 0.5rem 0.625rem 0.75rem;
}

/* Pins the header in place and leaves only the list to scroll - the same job
   .calendar-form does for the Add Event dialog, needed here because the header now
   lives inside the frame alongside the list (see gear/event_templates/index's own
   note) rather than as a flex sibling of it supplied by some other wrapper. */
.calendar-templates__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The hairline itself is .calendar-sheet__header's own now (see calendar.css) - this
   just tightens the gap around it, sized for a header sitting directly over a list
   rather than over a form's first field. */
.calendar-templates__frame .calendar-sheet__header {
  padding-bottom: 0.625rem;
  margin-bottom: 0.125rem;
}

dialog.pg-modal .modal-body.calendar-templates__body {
  flex: 1 1 auto;
  min-height: 0;

  padding: 0.5rem 0;

  overflow-y: auto;
}

/* Narrower than the shared .calendar-sheet width (26.25rem, sized for the fuller Add
   Event dialog) on anything wide enough to centre it rather than dock it to the
   bottom - a template's name, colour and place don't need that much room, and a
   list this plain read as oddly wide for what's in it. */
@media (width >= 576px) {
  dialog.pg-modal.calendar-templates-sheet {
    width: 20rem;
  }
}

.calendar-templates__empty {
  margin: 0.5rem 0 0;

  font-size: 0.8125rem;
}

.calendar-templates__list {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;

  margin: 0;
  padding: 0;
}

/* --bs-border-radius-sm directly, not --pg-form-radius: that token is only ever set
   inside .calendar-form-sheet (see calendar_form.css), which this dialog isn't - it
   would resolve to nothing and this row would draw with square corners while the
   title field two dialogs over stayed rounded. --bs-border-radius-sm is Bootstrap's
   own variable and is what .form-control-sm (the title field) is rounded with
   regardless of which dialog it's in, so reading it directly is what actually keeps
   the two matched. */
.calendar-templates__row {
  display: flex;
  align-items: stretch;
  column-gap: 0.125rem;

  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);

  padding-right: 0.25rem;
}

/* The "use this template" trigger - most of the row, borderless so it reads as part
   of it rather than as a button dropped onto a card. */
.calendar-templates__row-button {
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  min-width: 0;

  padding: 0.375rem 0.5rem;

  background: none;
  border: none;

  text-align: left;
}

.calendar-templates__row-button:hover,
.calendar-templates__row-button:focus-visible {
  background-color: var(--bs-tertiary-bg);
}

/* Opened from within New Template mode, where using another template to fill these
   fields would just as likely be a mistake as not - see the "why" note on
   Gear::EventTemplatesController#index. Not a button at all in that case (rather
   than a disabled one), so the row is exactly as pressable as it looks. */
.calendar-templates__row-button--inert {
  cursor: default;
}

.calendar-templates__row-button--inert:hover {
  background: none;
}

.calendar-templates__row-colour {
  flex: 0 0 auto;

  width: 0.875rem;
  height: 0.875rem;

  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.calendar-templates__row-text {
  display: flex;
  flex-direction: column;

  min-width: 0;
  flex: 1 1 auto;
}

.calendar-templates__row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 0.8125rem;
  font-weight: 600;
}

.calendar-templates__row-location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 0.6875rem;
}

/* Edit and delete sit beside the row-button rather than inside it, so the whole row
   can still be styled as one bordered card without either tool inheriting its hover.
   Borderless here, unlike every other .calendar-form__tool: a whole row already
   reads as a set of controls, and a bordered square round each icon on top of that
   was two visual weights saying the same thing - quieter, and the row itself no
   longer needs the padding that made room for them. */
.calendar-templates__row .calendar-form__tool {
  align-self: center;

  background: none;
  border: none;
}

.calendar-templates__row .calendar-form__tool:hover {
  background-color: var(--bs-tertiary-bg);

  border-color: transparent;
}

.calendar-templates__row .calendar-form__tool--danger:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.12);
}