/*
 * The fixture page's Share sheet (FixtureShareSheet.js): what can be sent
 * as a picture — the scoreline, Puntrr's picks, the lineups, the match's
 * figures — one row each.
 *
 * The shell is the bet builder's (bet-builder.css): scrim, rounded panel on
 * --rest-y / --drag-y, the same dragging states, at the same z-index over
 * the fixture page. The rows are the Account page's list rows
 * (`.account-row`) with the Lineup Builder share menu's accent tint behind
 * each glyph, so a row that will send something reads as an action.
 */

.fixture-share {
  --rest-y: 100%;

  position: fixed;
  inset: 0;
  /* The band the bet builder and the match-player sheet occupy: above the
     fixture page it opens from, below the slip tray whose toasts report the
     share, and below search and stories. */
  z-index: 96;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--app-max-width);
  margin-inline: auto;
}

.fixture-share[hidden] {
  display: none;
}

.fixture-share__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
  transition-delay: var(--stagger-step);
}

.fixture-share[data-open="true"] .fixture-share__scrim {
  opacity: 0.4;
  transition-delay: 0ms;
}

.fixture-share__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, calc(640px * var(--scale)));
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-floating);
  transform: translateY(calc(var(--rest-y) + var(--drag-y, 0px)));
  transition: transform var(--exit-duration, var(--duration)) var(--easing);
}

.fixture-share[data-open="true"] .fixture-share__panel {
  --rest-y: 0%;

  transition: transform var(--spring-duration) var(--spring) var(--stagger-step);
}

.fixture-share[data-dragging="true"] .fixture-share__panel {
  transition: none;
}

.fixture-share[data-dragging="released"] .fixture-share__panel {
  transition: transform var(--spring-duration) var(--spring);
}

/* --- Head ------------------------------------------------------------------------ */

.fixture-share__grabber {
  display: grid;
  place-items: center;
  padding: var(--space-2) 0 var(--space-1);
  cursor: grab;
  touch-action: none;
}

.fixture-share__bar {
  width: calc(36px * var(--scale));
  height: calc(4px * var(--scale));
  background: var(--border);
  border-radius: var(--radius-full);
}

.fixture-share__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-3) var(--space-5);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.fixture-share__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.fixture-share__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.fixture-share__subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Body ------------------------------------------------------------------------ */

.fixture-share__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--space-4) calc(var(--space-4) + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fixture-share__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.fixture-share__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(64px * var(--scale));
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  text-align: left;
  /* Press scale comes from [data-pressable] in interactions.css. */
  transition:
    background-color var(--duration) var(--easing),
    transform var(--spring-duration) var(--spring);
}

.fixture-share__row + .fixture-share__row {
  border-top: 1px solid var(--border);
}

.fixture-share__row[data-pressed="true"] {
  background: var(--surface-sunken);
}

.fixture-share__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
}

.fixture-share__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.fixture-share__label {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.fixture-share__hint {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The line a hint will hold, while the option is still being asked about. */
.fixture-share__skeleton {
  display: block;
  width: 60%;
  margin-block: var(--space-1);
}

.fixture-share__trail {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.fixture-share__row[data-state="ready"] .fixture-share__trail {
  color: var(--accent);
}

/* Nothing behind it: the row stays in the list, so the reader can see what
   could have been shared and why not, but drops out of the accent. */
.fixture-share__row[data-state="empty"] .fixture-share__icon {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.fixture-share__row[data-state="empty"] .fixture-share__label {
  color: var(--text-muted);
}

.fixture-share__row[aria-disabled="true"][data-pressed="true"] {
  background: none;
}

.fixture-share__row[data-state="failed"] .fixture-share__hint {
  color: var(--error-strong);
}