/* Selection moves only after the component changes its semantic selected state. */
:is(.app-shell, .dialog:not(.av-pp-dialog)) .av-segmented-ready {
  position: relative;
  isolation: isolate;
}
.av-segmented-ready > .av-segmented-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 7px;
  background: linear-gradient(145deg, #fff08c, #ffdc31 58%, #ebc524);
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 2px 7px rgba(0,0,0,.16);
  transition: transform 420ms cubic-bezier(.42,0,.2,1), width 420ms cubic-bezier(.42,0,.2,1), height 420ms cubic-bezier(.42,0,.2,1);
}
.av-segmented-ready > .av-segmented-indicator[hidden] { display: none; }
:is(.app-shell .main-content, .dialog:not(.av-pp-dialog)) .av-segmented-ready > button {
  position: relative;
  z-index: 1;
}
:is(.app-shell .main-content, .dialog:not(.av-pp-dialog)) .av-segmented-ready > button:is([aria-pressed="true"], [aria-selected="true"]) {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  color: #181504;
  box-shadow: none;
  text-shadow: none;
}
/* On narrow screens, selectable tab rows use the available content width.
   Text may break at spaces, while short words such as Todos stay intact. */
@media (max-width: 600px) {
  :is(.app-shell .main-content, .dialog:not(.av-pp-dialog))
    :is(.segmented, .team-planner-views, .activity-view-options, .marketing-status-segments, .forum-board-tabs, .fll-admin-tabs, .fll-account-tabs, .document-export-tabs, .dialog-tabs).av-segmented-ready {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  :is(.app-shell .main-content, .dialog:not(.av-pp-dialog))
    :is(.segmented, .team-planner-views, .activity-view-options, .marketing-status-segments, .forum-board-tabs, .fll-admin-tabs, .fll-account-tabs, .document-export-tabs, .dialog-tabs).av-segmented-ready > button {
    flex: 1 1 auto;
    min-width: min-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}
html.av-phone-layout :is(.app-shell .main-content, .dialog:not(.av-pp-dialog))
  :is(.segmented, .team-planner-views, .activity-view-options, .marketing-status-segments, .forum-board-tabs, .fll-admin-tabs, .fll-account-tabs, .document-export-tabs, .dialog-tabs).av-segmented-ready {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  flex-wrap: wrap;
}
html.av-phone-layout :is(.app-shell .main-content, .dialog:not(.av-pp-dialog))
  :is(.segmented, .team-planner-views, .activity-view-options, .marketing-status-segments, .forum-board-tabs, .fll-admin-tabs, .fll-account-tabs, .document-export-tabs, .dialog-tabs).av-segmented-ready > button {
  flex: 1 1 auto;
  min-width: min-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (prefers-reduced-motion: reduce) {
  .av-segmented-ready > .av-segmented-indicator { transition: none; }
}
@media (forced-colors: active) {
  .av-segmented-ready > .av-segmented-indicator { background: Highlight; box-shadow: none; }
  :is(.app-shell .main-content, .dialog:not(.av-pp-dialog)) .av-segmented-ready > button:is([aria-pressed="true"], [aria-selected="true"]) { color: HighlightText; }
}