@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer elements {
  .kit-role-count {
    overflow-wrap: break-word;
  }
}
@layer roles {
  .kit-role-count {
    flex: none;
    min-inline-size: 1lh;
    margin-inline-start: auto;
    padding-inline: var(--_kit-rhythm);
    border: var(--_kit-rule) solid transparent;
    border-radius: var(--_kit-inner-radius);
    background: var(--_kit-wash);
    color: var(--_kit-text-ink);
    font-size: var(--_kit-label-size);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
  }
  .kit-role-count[data-kit-state~=attention] {
    border-color: var(--_kit-text-ink);
    font-weight: var(--_kit-strong-weight);
  }
  @media screen and (forced-colors: none) {
    .kit-role-count[data-kit-state~=attention] {
      border-color: var(--_kit-status-attention);
      background: var(--_kit-status-attention-fill);
      color: var(--_kit-status-attention-fill-ink);
    }
  }
  .kit-layout-shell > .kit-region-chrome > .kit-region-rail .kit-role-destination[data-kit-state~=current] > .kit-role-count,
  .kit-layout-shell > .kit-region-chrome > .kit-region-bottom-bar .kit-role-destination[data-kit-state~=current] > .kit-role-count,
  .kit-layout-shell > .kit-region-chrome > .kit-region-rail .kit-region-destination-group > details:not([open]) > summary[aria-current] > .kit-role-count,
  .kit-layout-shell > .kit-region-chrome > .kit-region-bottom-bar > .kit-region-destinations > .kit-region-more > .kit-region-opener[aria-current] > .kit-role-count {
    box-shadow: 0 0 0 var(--_kit-rule) var(--_kit-rail-tint), 0 0 0 0 var(--_kit-current-entry-fill);
  }
  .kit-role-count > .kit-region-spoken {
    position: absolute;
    inline-size: var(--_kit-rule);
    block-size: var(--_kit-rule);
    overflow: clip;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kit-layout-shell > .kit-region-chrome > .kit-region-rail[data-kit-fit~=collapsed] li > .kit-role-destination > .kit-role-count {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    margin-inline-start: 0;
    translate: 0 -30%;
  }
  .kit-layout-shell > .kit-region-chrome > .kit-region-bottom-bar > ul > li > .kit-role-destination > .kit-role-count {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: center;
    margin-inline-start: 0;
    translate: calc(var(--_kit-navigation-icon) / 2 + 50% - var(--_kit-rhythm) / 2) calc(-1 * var(--_kit-rhythm));
  }
  .kit-role-local-tabs > .kit-region-tab > .kit-role-count,
  .kit-role-local-tabs > .kit-region-more > .kit-role-subtle-action .kit-role-count {
    margin-block: calc(-1 * var(--_kit-rule));
  }
}
@layer shell {
  .kit-layout-shell > .kit-region-chrome > .kit-region-rail .kit-region-destination-group > details[open] > .kit-region-group-name > .kit-role-count {
    display: none;
  }
}
@layer layouts {
  .kit-layout-calendar [data-kit-state~=loading] > .kit-role-count {
    background: var(--_kit-wash-muted);
    border-color: transparent;
    color: transparent;
    animation: kit-wait var(--_kit-appear) var(--_kit-settle) var(--_kit-wait) backwards;
  }
  .kit-layout-calendar [data-kit-state~=loading] :is([data-kit-region], [data-kit-role])[data-kit-state~=loading]:not(form, .kit-region-filters) > .kit-role-count {
    animation: none;
  }
  .kit-layout-calendar[data-kit-state~=loading] :is([data-kit-region], [data-kit-role])[data-kit-state~=loading]:not(form, .kit-region-filters) > .kit-role-count {
    animation: none;
  }
  [data-kit-state~=loading] .kit-layout-calendar :is([data-kit-region], [data-kit-role])[data-kit-state~=loading]:not(form, .kit-region-filters) > .kit-role-count {
    animation: none;
  }
  .kit-layout-conversation > .kit-region-inbox .kit-role-row .kit-region-subject > .kit-role-count {
    margin-inline-start: var(--_kit-inset-tight);
  }
  .kit-layout-list button[popovertarget] > .kit-region-label > .kit-role-count,
  .kit-layout-reports button[popovertarget] > .kit-region-label > .kit-role-count,
  .kit-layout-calendar button[popovertarget] > .kit-region-label > .kit-role-count {
    margin-block: calc(-1 * var(--_kit-rule));
  }
}