{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\naction-list {\n  display: block;\n}\n\nnav-list {\n  display: block;\n}\n\n.ActionListHeader {\n  margin-left: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n  padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    top: calc(-1 * var(--actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      top: calc(-1 * var(--actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--borderWidth-thin);\n      content: '';\n      background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    & + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* hide dividers  */\n  @media (hover: hover) {\n    &:hover {\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n\n      & .ActionListItem-descriptionWrap--inline::before,\n      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[hidden] + .ActionList-sectionDivider {\n    display: none;\n  }\n\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\n      }\n    }\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--control-transparent-bgColor-hover);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--control-transparent-bgColor-active);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--borderWidth-thin) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal);\n    background: var(--control-transparent-bgColor-selected);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line */\n\n    &::after {\n      @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    /* provides a visual indication of the current item for Windows high-contrast mode */\n    outline: 2px solid transparent;\n\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--control-transparent-bgColor-selected);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &.ActionListItem--disabled,\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--control-fgColor-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--control-danger-bgColor-hover);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  padding-block: var(--actionListContent-paddingBlock);\n  padding-inline: var(--control-medium-paddingInline-condensed);\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--control-fgColor-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--control-fgColor-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition:\n          opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n          transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: visible;\n      opacity: 1;\n      transition:\n        visibility 0 linear 0,\n        opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--control-checked-bgColor-rest);\n        stroke: var(--control-checked-bgColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--fgColor-onEmphasis);\n      }\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: hidden;\n      opacity: 0;\n      transition:\n        visibility 0 linear 50ms,\n        opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--bgColor-default);\n        stroke: var(--control-borderColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--bgColor-default);\n      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n.ActionListItem-visual--leading svg {\n  fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-small);\n  color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--control-medium-lineBoxHeight);\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium);\n  color: var(--fgColor-default);\n  grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--text-body-size-small);\n  line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.ActionListItem-trailingAction {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n  & .ActionListItem-trailingAction {\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    & .ActionListItem-trailingAction {\n      visibility: visible;\n    }\n  }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n  /* with children */\n  &:not(:empty) {\n    display: flex;\n    padding-inline: var(--actionListContent-paddingBlock);\n    padding-block: var(--base-size-8);\n    font-size: var(--text-body-size-small);\n    line-height: var(--text-body-lineHeight-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    margin-inline: calc(-1 * var(--base-size-8));\n    list-style: none;\n    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    align-self: flex-start;\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  margin-inline: calc(-1 * var(--base-size-8));\n  background: var(--bgColor-muted);\n  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}