{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n  --yattho-actionListContent-paddingBlock: var(--yattho-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    top: calc(-1 * var(--yattho-actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    background: 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(--yattho-actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--yattho-borderWidth-thin, 1px);\n      content: '';\n      background: 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: transparent;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\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(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &:active {\n        background-color: var(--color-action-list-item-default-active-bg);\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(--color-action-list-item-default-hover-bg);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--yattho-borderWidth-thin, 1px) transparent;\n          outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));\n          box-shadow: var(--yattho-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--color-action-list-item-default-active-bg);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--yattho-borderWidth-thin, 1px) transparent;\n        outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));\n        box-shadow: var(--yattho-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\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: visibility 0 linear 0, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-accent-fg);\n        stroke: var(--color-accent-fg);\n        stroke-width: var(--yattho-borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--color-fg-on-emphasis);\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: visibility 0 linear 50ms, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n      clip-path: inset(16px 0 0 0);\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-canvas-default);\n        stroke: var(--color-border-default);\n        stroke-width: var(--yattho-borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--color-canvas-default);\n      border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n    }\n  }\n\n  @keyframes checkmarkIn {\n    from {\n      clip-path: inset(16px 0 0 0);\n    }\n\n    to {\n      clip-path: inset(0 0 0 0);\n    }\n  }\n\n  @keyframes checkmarkOut {\n    from {\n      clip-path: inset(0 0 0 0);\n    }\n\n    to {\n      clip-path: inset(16px 0 0 0);\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal, 400);\n    background: var(--color-action-list-item-default-selected-bg);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-action-list-item-default-hover-bg);\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, 4px));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\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  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--color-yattho-fg-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--color-yattho-fg-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(--color-danger-fg);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--color-danger-fg);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--color-action-list-item-danger-hover-bg);\n\n        & .ActionListItem-label {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--color-action-list-item-danger-active-bg);\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(--yattho-actionListContent-paddingBlock);\n  padding-inline: var(--yattho-control-medium-paddingInline-condensed, 8px);\n  color: var(--color-fg-default);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\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(--yattho-control-medium-gap, 8px);\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(--color-yattho-fg-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--color-yattho-fg-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: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24, 24px);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32, 32px);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36, 36px);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40, 40px);\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, 600);\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, 16px)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\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  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --yattho-actionListContent-paddingBlock: var(--yattho-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --yattho-actionListContent-paddingBlock: var(--yattho-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --yattho-actionListContent-paddingBlock: var(--yattho-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\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/* 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, 4px);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold, 600);\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, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--yattho-text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\n  color: var(--color-fg-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(--yattho-control-medium-lineBoxHeight, 20px);\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  fill: var(--color-fg-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));\n  color: var(--color-fg-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(--yattho-text-body-size-small, 12px);\n  line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\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(--yattho-actionListContent-paddingBlock);\n    padding-block: var(--base-size-8, 8px);\n    font-size: var(--yattho-text-body-size-small, 12px);\n    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--yattho-borderWidth-thin, 1px);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));\n    margin-block-end: var(--base-size-8, 8px);\n    margin-inline: calc(-1 * var(--base-size-8, 8px));\n    list-style: none;\n    background: var(--color-action-list-item-inline-divider);\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--yattho-text-body-size-small, 12px);\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));\n  margin-block-end: var(--base-size-8, 8px);\n  margin-inline: calc(-1 * var(--base-size-8, 8px));\n  background: var(--color-canvas-subtle);\n  border-top: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n  border-bottom: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8, 8px);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4, 4px);\n  height: var(--base-size-24, 24px);\n  content: '';\n  background: var(--color-accent-fg);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}"]}