/* The event workspace tab tiles, drawn by app/event-workspace-tabs.js. Ported
   from the approved event page mockup ("tabs hang from the bottom of the
   header, like folder tabs"): an icon over a label, one equal column per tile,
   the open tile filled in the event's branch colour, with a white icon and
   label, and joined to the header above it by curved corners. The branch
   colour comes from the --event-card-accent token events-index.css gives the
   tab bar under the header. On a phone the tiles wrap onto more
   rows. */

.event-workspace-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;gap:6px;margin:0 0 22px;padding:0}
.event-workspace-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:84px;margin:0;padding:10px 6px;border:1px solid transparent;border-top:0;border-radius:16px;background:transparent;box-shadow:none;color:var(--ink);font:600 12px/1.2 "Poppins",sans-serif;text-align:center;white-space:normal;cursor:pointer}
.event-workspace-tabs button:hover{background:color-mix(in srgb,var(--event-card-accent,#6b6b70) 7%,transparent)}
.event-workspace-tabs button.active{border-color:var(--event-card-accent,#6b6b70);border-radius:0 0 16px 16px;background:var(--event-card-accent,#6b6b70);box-shadow:0 10px 22px color-mix(in srgb,var(--event-card-accent,#6b6b70) 22%,transparent);color:#fff}

/* The open tile's inside curves, which join it to the header's bottom edge.
   The header runs edge to edge, past the first and last tiles, so every open
   tile has both curves. */
.event-workspace-tabs button.active::before,.event-workspace-tabs button.active::after{content:"";position:absolute;top:0;width:16px;height:16px;pointer-events:none}
.event-workspace-tabs button.active::before{left:-16px;background:radial-gradient(circle at 0 100%,transparent 15.5px,var(--event-card-accent,#6b6b70) 16px)}
.event-workspace-tabs button.active::after{right:-16px;background:radial-gradient(circle at 100% 100%,transparent 15.5px,var(--event-card-accent,#6b6b70) 16px)}

/* The header the tiles hang from loses its bottom gap and bottom corners. */
.event-head:has(+ .event-workspace-tabs){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}

/* The icon is painted in the label's colour, so it turns white on the open tile. */
.event-workspace-tab-icon{display:block;flex:none;width:30px;height:30px;background:currentColor;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.event-workspace-tab-icon[data-icon="dash"]{-webkit-mask-image:url("assets/event-tabs/dash.svg");mask-image:url("assets/event-tabs/dash.svg")}
.event-workspace-tab-icon[data-icon="workgroups"]{-webkit-mask-image:url("assets/event-tabs/workgroups.svg");mask-image:url("assets/event-tabs/workgroups.svg")}
.event-workspace-tab-icon[data-icon="people"]{-webkit-mask-image:url("assets/event-tabs/people.svg");mask-image:url("assets/event-tabs/people.svg")}
.event-workspace-tab-icon[data-icon="sponsors"]{-webkit-mask-image:url("assets/event-tabs/sponsors.svg");mask-image:url("assets/event-tabs/sponsors.svg")}
.event-workspace-tab-icon[data-icon="tasks"]{-webkit-mask-image:url("assets/event-tabs/tasks.svg");mask-image:url("assets/event-tabs/tasks.svg")}
.event-workspace-tab-icon[data-icon="ops"]{-webkit-mask-image:url("assets/event-tabs/ops.svg");mask-image:url("assets/event-tabs/ops.svg")}
.event-workspace-tab-icon[data-icon="email"]{-webkit-mask-image:url("assets/event-tabs/email.svg");mask-image:url("assets/event-tabs/email.svg")}
.event-workspace-tab-icon[data-icon="creative"]{-webkit-mask-image:url("assets/event-tabs/creative.svg");mask-image:url("assets/event-tabs/creative.svg")}
.event-workspace-tab-icon[data-icon="agenda"]{-webkit-mask-image:url("assets/event-tabs/agenda.svg");mask-image:url("assets/event-tabs/agenda.svg")}

/* Badges sit in the tile's top-right corner: small and grey, in the label's
   weight (her mockup's .count), not the <b> element's bold. */
.event-workspace-tabs button b{position:absolute;top:8px;right:10px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#eceae4;color:#565a60;font-size:10px;font-weight:600}
.event-workspace-tabs button.active b{background:rgba(255,255,255,.22);color:#fff}
.event-workspace-tabs button b.event-workspace-tab-loading{padding:0}
.event-workspace-tab-loading i{display:block;width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:native-crm-loading-spin .8s linear infinite}

/* Phone: the tiles wrap onto more rows, as in her playground, so every tab
   (the open one included) stays in view without sideways scrolling. A tile
   on a lower row cannot hang from the header, so on a phone the open tile is
   a whole rounded tile and the joining curves are not drawn. */
@media(max-width:760px){
  .event-workspace-tabs{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin:10px 0 16px}
  .event-workspace-tabs button.active{border-radius:16px;border-top:1px solid var(--event-card-accent,#6b6b70)}
  .event-workspace-tabs button.active::before,.event-workspace-tabs button.active::after{display:none}
}