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

import {controller} from '@github/catalyst'
// eslint-disable-next-line custom-elements/no-exports-with-element
export class ActionListTruncationObserver {
  resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const action = entry.target
      if (action instanceof HTMLElement) {
        this.update(action)
      }
    }
  })
  constructor(el: HTMLElement) {
    this.resizeObserver.observe(el)
  }
  unobserve(el: HTMLElement) {
    this.resizeObserver.unobserve(el)
  }
  update(el: HTMLElement) {
    const items = el.querySelectorAll('li')
    for (const item of items) {
      const label = item.querySelector('.ActionListItem-label') as HTMLElement
      if (!label) continue
      const tooltip = item.querySelector('.ActionListItem-truncationTooltip') as HTMLElement
      if (!tooltip) continue
      const isTruncated = label.scrollWidth > label.clientWidth
      if (isTruncated) {
        tooltip.style.display = ''
      } else {
        tooltip.style.display = 'none'
      }
    }
  }
}
@controller
// eslint-disable-next-line custom-elements/expose-class-on-global
export class ActionListElement extends HTMLElement {
  #truncationObserver: ActionListTruncationObserver
  connectedCallback() {
    this.#truncationObserver = new ActionListTruncationObserver(this)
  }
  disconnectedCallback() {
    this.#truncationObserver.unobserve(this)
  }
}
declare global {
  interface Window {
    ActionListElement: typeof ActionListElement
  }
}