/* Flexible menu rows: keep the title area open and pin shortcuts to the edge. */
.mac-popup__top,
.mac-popup__heading,
.mac-popup__first-meeting,
.mac-popup__standup,
.mac-popup__planning,
.mac-popup__suffix,
.mac-popup__bottom,
.mac-popup__none-cap {
  position: relative;
  background: var(--menu-row-fill);
  --menu-row-source-width: 336px;
}

.mac-popup__top::before,
.mac-popup__top::after,
.mac-popup__heading::before,
.mac-popup__heading::after,
.mac-popup__first-meeting::before,
.mac-popup__first-meeting::after,
.mac-popup__standup::before,
.mac-popup__standup::after,
.mac-popup__planning::before,
.mac-popup__planning::after,
.mac-popup__suffix::before,
.mac-popup__suffix::after,
.mac-popup__bottom::before,
.mac-popup__bottom::after,
.mac-popup__none-cap::before,
.mac-popup__none-cap::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background-image: url(../images/menu-open-sprite.png);
  background-size: 672px 503px;
  background-repeat: no-repeat;
  background-position-y: var(--menu-row-y);
  pointer-events: none;
}

.mac-popup__top::before,
.mac-popup__heading::before,
.mac-popup__first-meeting::before,
.mac-popup__standup::before,
.mac-popup__planning::before,
.mac-popup__suffix::before,
.mac-popup__bottom::before,
.mac-popup__none-cap::before {
  left: 0;
  width: max(190px, calc(100% - 50px));
  background-position-x: var(--sprite-x);
}

.mac-popup__top::after,
.mac-popup__heading::after,
.mac-popup__first-meeting::after,
.mac-popup__standup::after,
.mac-popup__planning::after,
.mac-popup__suffix::after,
.mac-popup__bottom::after,
.mac-popup__none-cap::after {
  right: 0;
  width: 50px;
  background-position-x: calc(var(--sprite-x) - var(--menu-row-source-width) + 50px);
}

.mac-popup__top { --menu-row-y: 0px; }
.mac-popup__heading { --menu-row-y: -80px; }
.mac-popup__first-meeting { --menu-row-y: var(--first-meeting-y); }
.mac-popup__standup { --menu-row-y: var(--standup-y); }
.mac-popup__planning { --menu-row-y: var(--planning-y); }
.mac-popup__suffix { --menu-row-y: var(--suffix-y); }
.mac-popup__bottom { --menu-row-y: -417px; }
.mac-popup__none-cap { --menu-row-y: -497px; }
.mac-popup__none-cap {
  position: absolute;
  inset: 0 auto auto 0;
}

.mac-popup { --menu-row-fill: rgb(194, 196, 241); }
.mac-popup[data-hour-cycle="24"] .mac-popup__first-meeting,
.mac-popup[data-hour-cycle="24"] .mac-popup__standup,
.mac-popup[data-hour-cycle="24"] .mac-popup__planning,
.mac-popup[data-hour-cycle="24"] .mac-popup__suffix {
  --menu-row-source-width: 310px;
}

@media (prefers-color-scheme: dark) {
  .mac-popup { --menu-row-fill: rgb(71, 72, 120); }
}