/* The card window's own buttons (components/card-window.ts; the owner, 17 Oct 2026), over the Learn page's window
   (learn.css): «تحرير» beside «إغلاق البطاقة», and «السابق» and «التالي» under the card, with where it is between them.
   /admin/cards gives the window these buttons; the Learn page's window has none. */

/* the title and the buttons share the line while there's room for both; on a phone the buttons have a line of their
   own, at its end */
.cw-head {
  flex-wrap: wrap;
}

.cw-head > .learn-card-titles {
  flex: 1 1 16rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* «السابق» at the start, the card's place in the middle, «التالي» at the end. As in the Learn page's field pager, the
   carets are written as for left to right; right to left, the browser mirrors them, so each points away from the
   middle, as the pages turn. */
.cw-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.cw-turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: 7rem;
  white-space: nowrap;
}

.cw-previous {
  grid-column: 1;
  justify-self: start;
}

.cw-next {
  grid-column: 3;
  justify-self: end;
}

.cw-previous::before {
  content: "‹" / "";
}

.cw-next::after {
  content: "›" / "";
}

.cw-turn::before,
.cw-turn::after {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1;
}

/* greyed at the end of the list: the keyboard can stay on it, and nothing happens */
.cw-turn[aria-disabled="true"],
.cw-turn[aria-disabled="true"]:hover {
  background: var(--color-surface);
  opacity: 0.6;
  cursor: default;
}

.cw-turn[aria-disabled="true"]:active {
  box-shadow: none;
}

/* in the text's colour: the muted one is a little too light for small text on white */
.cw-position {
  grid-column: 2;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* while the card turned to is on its way, the one shown is dimmed (only if it takes a moment) */
.cw-card[aria-busy="true"] > :not(.learn-card-head, .cw-nav) {
  opacity: 0.6;
  transition: opacity 0.2s 0.15s;
}

/* on a phone, the card's place has a line of its own, then «السابق» and «التالي», half the width each */
@media (max-width: 40rem) {
  .cw-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cw-position {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .cw-previous,
  .cw-next {
    grid-row: 2;
    justify-self: stretch;
    min-inline-size: 0;
  }

  .cw-next {
    grid-column: 2;
  }
}