assets/css/actionlist/action-list-item.scss
// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors

@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
  position: absolute;
  top: calc(50% - 12px);
  left: $padding-left;
  width: $spacer-1;
  height: $spacer-4;
  content: '';
  background: var(--focus-outlineColor);
  border-radius: $border-radius;
}

// <li>
.ActionList-item {
  position: relative;
  list-style: none;
  background-color: transparent;
  border-radius: $border-radius;

  &:hover,
  &:active {
    cursor: pointer;
  }

  // only hover li without list as children
  &:not(.ActionList-item--hasSubItem),
  // target contents of first child li if sub-item (li wraps item label + nested ul)
  &.ActionList-item--hasSubItem > .ActionList-content {
    @media (hover: hover) {
      &:hover {
        cursor: pointer;
        background-color: var(--control-transparent-bgColor-hover);

        &:not(.ActionList-item--navActive):not(:focus-visible) {
          // Support for "Windows high contrast mode"
          outline: $border-style $border-width transparent;
          outline-offset: -$border-width;
          // stylelint-disable-next-line primer/box-shadow
          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
        }
      }
    }

    &:active {
      background: var(--control-transparent-bgColor-active);

      &:not(.ActionList-item--navActive) {
        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
        outline:solid var(--borderWidth-thin) #0000;
        outline-offset: calc(var(--borderWidth-thin)*-1)
      }
    }

    // hide dividers

    @media (hover: hover) {
      &:hover {
        .ActionList-item-label::before,
        + .ActionList-item .ActionList-item-label::before {
          visibility: hidden;
        }

        .ActionList-item-descriptionWrap--inline::before,
        + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
          visibility: hidden;
        }
      }
    }
    // stylelint-disable-next-line no-duplicate-selectors
    &:active {
      .ActionList-item-label::before,
      + .ActionList-item .ActionList-item-label::before {
        visibility: hidden;
      }
    }
  }

  // target contents of li if sub-item (li wraps item label + nested ul)
  // collapse styles here
  &.ActionList-item--hasSubItem {
    // first child
    > .ActionList-content {
      z-index: 1;

      @media (hover: hover) {
        &:hover {
          background-color: var(--control-transparent-bgColor-hover);
        }
      }

      &:active {
        background-color: var(--control-transparent-bgColor-active);
      }
    }
  }

  // Make sure that the first visible item isn't a divider
  &[hidden] + .ActionList-sectionDivider {
    display: none;
  }

  // Autocomplete [aria-selected] items

  &[aria-selected='true'] {
    font-weight: $font-weight-normal;
    background: var(--control-transparent-bgColor-selected);

    @media (hover: hover) {
      &:hover {
        background-color: var(--control-transparent-bgColor-hover);
      }
    }

    &::before,
    + .ActionList-item::before {
      visibility: hidden;
    }

    // blue accent line
    &::after {
      @include activeIndicatorLine(-$spacer-1);
    }
  }

  // active state [aria-current]

  &.ActionList-item--navActive {
    &:not(.ActionList-item--subItem) {
      .ActionList-item-label {
        font-weight: $font-weight-bold;
      }
    }

    &:not(.ActionList-item--danger) {
      background: var(--control-transparent-bgColor-selected);

      @media (hover: hover) {
        &:hover {
          background-color: var(--control-transparent-bgColor-hover);
        }
      }

      &::before,
      + .ActionList-item::before {
        visibility: hidden;
      }

      // blue accent line
      &::after {
        @include activeIndicatorLine;
      }
    }
  }

  // checkbox item [aria-checked]
  // listbox [aria-selected]

  &[aria-checked='true'],
  &[aria-selected='true'] {
    // multiselect checkmark
    .ActionList-item-multiSelectCheckmark {
      visibility: visible;
      opacity: 1;
      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
    }

    // singleselect checkmark
    .ActionList-item-singleSelectCheckmark {
      visibility: visible;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
      }
    }

    // checkbox
    .ActionList-item-multiSelectIcon {
      .ActionList-item-multiSelectIconRect {
        fill: var(--focus-outlineColor);
        stroke: var(--focus-outlineColor);
        stroke-width: $border-width;
      }

      .ActionList-item-multiSelectCheckmark {
        fill: var(--fgColor-onEmphasis);
      }
    }
  }

  &[aria-checked='false'],
  &[aria-selected='false'] {
    // multiselect checkmark
    .ActionList-item-multiSelectCheckmark {
      visibility: hidden;
      opacity: 0;
      transition:
        visibility 0 linear $actionList-item-checkmark-transition-timing,
        opacity $actionList-item-checkmark-transition-timing;
    }

    // singleselect checkmark
    .ActionList-item-singleSelectCheckmark {
      visibility: hidden;
      transition: visibility 0s linear 200ms;
      clip-path: inset(16px 0 0 0);

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
      }
    }

    // checkbox
    .ActionList-item-multiSelectIcon {
      .ActionList-item-multiSelectIconRect {
        fill: var(--bgColor-default);
        stroke: var(--control-borderColor-rest);
        stroke-width: $border-width;
      }
    }

    .ActionList-item-multiSelectIconRect {
      fill: var(--bgColor-default);
      border: $border-width $border-style var(--control-borderColor-rest);
    }
  }

  @keyframes checkmarkIn {
    from {
      clip-path: inset(16px 0 0 0);
    }

    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes checkmarkOut {
    from {
      clip-path: inset(0 0 0 0);
    }

    to {
      clip-path: inset(16px 0 0 0);
    }
  }

  // disabled
  &[aria-disabled='true'] {
    .ActionList-content {
      .ActionList-item-label,
      .ActionList-item-description {
        color: var(--fgColor-disabled);
      }

      .ActionList-item-visual {
        fill: var(--fgColor-disabled);
      }
    }

    @media (hover: hover) {
      &:hover {
        cursor: not-allowed;
        background-color: transparent;
      }
    }
  }

  // variants

  // danger
  &.ActionList-item--danger {
    .ActionList-item-label {
      color: var(--fgColor-danger);
    }

    .ActionList-item-visual {
      color: var(--fgColor-danger);
    }

    @media (hover: hover) {
      &:hover {
        background: var(--control-danger-bgColor-hover);

        .ActionList-item-label {
          color: var(--control-danger-fgColor-hover)
        }
      }
    }

    .ActionList-content {
      &:active {
        background: var(--color-action-list-item-danger-active-bg);
      }
    }
  }

  // if nested list exists, remove default padding
  .ActionList {
    // stylelint-disable-next-line primer/spacing
    padding: unset;
  }
}

// button or a href
.ActionList-content {
  position: relative;
  display: grid;
  width: 100%;
  // stylelint-disable-next-line primer/spacing
  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
  font-size: $body-font-size;
  font-weight: $font-weight-normal;
  color: var(--fgColor-default);
  text-align: left;
  user-select: none;
  background-color: transparent;
  // stylelint-disable-next-line declaration-property-value-disallowed-list
  border: none;
  border-radius: $border-radius;
  transition: $actionList-item-bg-transition;
  touch-action: manipulation;
  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
  > :not(:last-child) {
    margin-right: $spacer-2;
  }

  // state

  &:hover {
    text-decoration: none;
  }

  &:focus {
    @include focusOutline;

    // remove fallback :focus if :focus-visible is supported
    &:not(:focus-visible) {
      outline: solid 1px transparent;
    }
  }

  // default focus state
  &:focus-visible {
    @include focusOutline;
  }

  // disabled
  &[aria-disabled='true'] {
    .ActionList-item-label,
    .ActionList-item-description {
      color: var(--fgColor-disabled);
    }

    .ActionList-item-visual {
      fill: var(--fgColor-disabled);
    }

    @media (hover: hover) {
      &:hover {
        cursor: not-allowed;
        background-color: transparent;
      }
    }
  }

  // collapsible item [aria-expanded]

  // nesting (single level)
  // target items inside expanded subgroups
  &[aria-expanded] {
    + .ActionList--subGroup {
      @media screen and (prefers-reduced-motion: no-preference) {
        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
      }

      .ActionList-content {
        padding-left: $spacer-4;
      }
    }

    // has 16px leading visual
    &.ActionList-content--visual16 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: $spacer-5;
      }
    }

    // has 20px leading visual
    &.ActionList-content--visual20 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: $spacer-2 * 4.5; // 36px
      }
    }

    // has 24px leading visual
    &.ActionList-content--visual24 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: $spacer-6;
      }
    }
  }

  &[aria-expanded='true'] {
    .ActionList-item-collapseIcon {
      transition: transform 120ms linear;
      transform: scaleY(-1);
    }

    + .ActionList--subGroup {
      height: auto;
      overflow: visible;
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    &.ActionList-content--hasActiveSubItem {
      > .ActionList-item-label {
        font-weight: $font-weight-bold;
      }
    }
  }

  &[aria-expanded='false'] {
    .ActionList-item-collapseIcon {
      transition: transform 120ms linear;
      transform: scaleY(1);
    }

    + .ActionList--subGroup {
      height: 0;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-$spacer-3);
    }

    // show active indicator on parent collapse if child is active
    &.ActionList-content--hasActiveSubItem {
      background: var(--control-transparent-bgColor-selected);

      .ActionList-item-label {
        font-weight: $font-weight-bold;
      }

      &::before,
      + .ActionList-item::before {
        visibility: hidden;
      }

      // blue accent line
      &::after {
        @include activeIndicatorLine;
      }
    }
  }

  // sizes

  &.ActionList-content--sizeMedium {
    // 44px total height
    // stylelint-disable-next-line primer/spacing
    padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
  }

  &.ActionList-content--sizeLarge {
    // 48px total height
    // stylelint-disable-next-line primer/spacing
    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
  }

  &.ActionList-content--fontSmall {
    font-size: $font-size-small;
  }

  // On pointer:coarse (mobile), all list items are large
  @media (pointer: coarse) {
    // stylelint-disable-next-line primer/spacing
    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
  }

  &.ActionList-content--blockDescription {
    // if leading/trailing visual, align with first line of content
    .ActionList-item-visual {
      place-self: start;
    }
  }
}

// place children on grid

.ActionList-item-action--leading {
  grid-area: leadingAction;
}

.ActionList-item-visual--leading {
  grid-area: leadingVisual;
}

.ActionList-item-label {
  grid-area: label;
}

.ActionList-item-visual--trailing {
  grid-area: trailingVisual;
}

.ActionList-item-action--trailing {
  grid-area: trailingAction;
}

// wrapper span
// default block
.ActionList-item-descriptionWrap {
  grid-area: label;
  display: flex;
  flex-direction: column;

  .ActionList-item-description {
    margin-top: $spacer-1;
  }

  .ActionList-item-label {
    font-weight: $font-weight-bold;
  }
}

// inline
.ActionList-item-descriptionWrap--inline {
  position: relative;
  flex-direction: row;
  align-items: baseline;

  .ActionList-item-description {
    // stylelint-disable-next-line primer/spacing
    margin-left: $actionList-item-padding-horizontal;
  }
}

// description
.ActionList-item-description {
  font-size: $font-size-small;
  font-weight: $font-weight-normal;
  line-height: $lh-default;
  color: var(--fgColor-muted);
}

// helper for grid alignment with multi-line content
// span wrapping svg or text
.ActionList-item-visual,
.ActionList-item-action {
  display: flex;
  min-height: $actionList-item-height-sm;
  color: var(--fgColor-muted); // if visual is text
  pointer-events: none;
  fill: var(--fgColor-muted);
  align-items: center;
}

// text
// stylelint-disable-next-line no-duplicate-selectors
.ActionList-item-label {
  position: relative; // for pseudo dividers
  font-weight: $font-weight-normal;
  // we need a strict value here for grid alignment
  // stylelint-disable-next-line primer/typography
  line-height: $actionList-item-label-line-height;
  color: var(--fgColor-default);
}

.ActionList-item-label--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// nested lists (only supports 1 level currently)
// target ActionList-item--subItem for padding-left to maintain :active :after state

// TODO: remove with PVC implementation
.ActionList-item--subItem > .ActionList-content {
  font-size: $font-size-small;
}
