:root {
  --yattho-actionListContent-paddingBlock: var(--yattho-control-medium-paddingBlock, 6px);
}

/* ActionList */

/* <ul> */

.ActionListWrap {
  list-style: none;
}

.ActionListWrap--inset {
  padding: var(--base-size-8, 8px);
}

/* list dividers */

.ActionListWrap--divided .ActionListItem-label::before {
    position: absolute;
    top: calc(-1 * var(--yattho-actionListContent-paddingBlock));
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background: var(--color-action-list-item-inline-divider);
  }

/* if descriptionWrap--inline exists, move pseudo divider to wrapper */

.ActionListWrap--divided .ActionListItem-descriptionWrap--inline::before {
      position: absolute;
      top: calc(-1 * var(--yattho-actionListContent-paddingBlock));
      display: block;
      width: 100%;
      height: var(--yattho-borderWidth-thin, 1px);
      content: '';
      background: var(--color-action-list-item-inline-divider);
    }

/* unset the default label pseudo */

.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label::before {
      content: unset;
    }

/* hide divider if item is active */

.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label::before,
    .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: transparent;
  border-radius: var(--yattho-borderRadius-medium, 6px);

  /* 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) {
        .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover {
          background-color: var(--color-action-list-item-default-hover-bg);
        }
      }

.ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
        background-color: var(--color-action-list-item-default-active-bg);
      }

/* only hover li without list as children */

@media (hover: hover) {
      .ActionListItem:not(.ActionListItem--hasSubItem):hover, .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover {
        cursor: pointer;
        background-color: var(--color-action-list-item-default-hover-bg);
      }

        .ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive, :focus-visible), .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover:not(.ActionListItem--navActive, :focus-visible) {
          /* Support for "Windows high contrast mode" */
          outline: solid var(--yattho-borderWidth-thin, 1px) transparent;
          outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));
          box-shadow: var(--yattho-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
        }
    }

.ActionListItem:not(.ActionListItem--hasSubItem):active, .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
      background: var(--color-action-list-item-default-active-bg);
    }

.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive), .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active:not(.ActionListItem--navActive) {
        /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
        outline: solid var(--yattho-borderWidth-thin, 1px) transparent;
        outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));
        box-shadow: var(--yattho-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
      }

.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label::before,
      .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active .ActionListItem-label::before,
      .ActionListItem:not(.ActionListItem--hasSubItem):active + .ActionListItem .ActionListItem-label::before,
      .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active + .ActionListItem .ActionListItem-label::before {
        visibility: hidden;
      }

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

/* multiselect checkmark */

.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectCheckmark {
      visibility: visible;
      opacity: 1;
      transition: visibility 0 linear 0, opacity 50ms;
    }

/* singleselect checkmark */

.ActionListItem[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
      visibility: visible;
    }

@media screen and (prefers-reduced-motion: no-preference) {

.ActionListItem[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
    }
      }

/* checkbox */

.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
        fill: var(--color-accent-fg);
        stroke: var(--color-accent-fg);
        stroke-width: var(--yattho-borderWidth-thin, 1px);
      }

.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark {
        fill: var(--color-fg-on-emphasis);
      }

/* multiselect checkmark */

.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectCheckmark {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0 linear 50ms, opacity 50ms;
    }

/* singleselect checkmark */

.ActionListItem[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='false'] .ActionListItem-singleSelectCheckmark {
      visibility: hidden;
      transition: visibility 0s linear 200ms;
      clip-path: inset(16px 0 0 0);
    }

@media screen and (prefers-reduced-motion: no-preference) {

.ActionListItem[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='false'] .ActionListItem-singleSelectCheckmark {
        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
    }
      }

/* checkbox */

.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
        fill: var(--color-canvas-default);
        stroke: var(--color-border-default);
        stroke-width: var(--yattho-borderWidth-thin, 1px);
      }

.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectIconRect {
      fill: var(--color-canvas-default);
      border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
    }

.ActionListItem {

  @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);
    }
  }

  /* Autocomplete [aria-selected] items */
}

.ActionListItem[aria-selected='true'] {
    font-weight: var(--base-text-weight-normal, 400);
    background: var(--color-action-list-item-default-selected-bg);
  }

@media (hover: hover) {
      .ActionListItem[aria-selected='true']:hover {
        background-color: var(--color-action-list-item-default-hover-bg);
      }
    }

.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, 4px));
      width: var(--base-size-4, 4px);
      height: var(--base-size-24, 24px);
      content: '';
      background: var(--color-accent-fg);
      border-radius: var(--yattho-borderRadius-medium, 6px);
    }

/* active state [aria-current] */

.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label {
        font-weight: var(--base-text-weight-semibold, 600);
      }

.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
      background: var(--color-action-list-item-default-selected-bg);
    }

@media (hover: hover) {
        .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover {
          background-color: var(--color-action-list-item-default-hover-bg);
        }
      }

.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, 8px));
        width: var(--base-size-4, 4px);
        height: var(--base-size-24, 24px);
        content: '';
        background: var(--color-accent-fg);
        border-radius: var(--yattho-borderRadius-medium, 6px);
      }

/* disabled */

.ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-label,
      .ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-description {
        color: var(--color-yattho-fg-disabled);
      }

.ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-visual {
        fill: var(--color-yattho-fg-disabled);
      }

@media (hover: hover) {
      .ActionListItem[aria-disabled='true']:hover {
        cursor: not-allowed;
        background-color: transparent;
      }
    }

/* variants */

/* danger */

.ActionListItem.ActionListItem--danger .ActionListItem-label {
      color: var(--color-danger-fg);
    }

.ActionListItem.ActionListItem--danger .ActionListItem-visual {
      color: var(--color-danger-fg);
    }

@media (hover: hover) {
      .ActionListItem.ActionListItem--danger:hover {
        background: var(--color-action-list-item-danger-hover-bg);
      }

        .ActionListItem.ActionListItem--danger:hover .ActionListItem-label {
          color: var(--color-action-list-item-danger-hover-text);
        }
    }

.ActionListItem.ActionListItem--danger .ActionListContent:active {
        background: var(--color-action-list-item-danger-active-bg);
      }

/* button or a href */

.ActionListContent {
  position: relative;
  display: grid;
  width: 100%;
  padding-block: var(--yattho-actionListContent-paddingBlock);
  padding-inline: var(--yattho-control-medium-paddingInline-condensed, 8px);
  color: var(--color-fg-default);
  text-align: left;
  -webkit-user-select: none;
          user-select: none;
  background-color: transparent;
  border: none;
  border-radius: var(--yattho-borderRadius-medium, 6px);
  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) {
    margin-right: var(--yattho-control-medium-gap, 8px);
  }

/* state */

.ActionListContent:hover {
    text-decoration: none;
  }

/* disabled */

.ActionListContent[aria-disabled='true'] .ActionListItem-label,
    .ActionListContent[aria-disabled='true'] .ActionListItem-description {
      color: var(--color-yattho-fg-disabled);
    }

.ActionListContent[aria-disabled='true'] .ActionListItem-visual {
      fill: var(--color-yattho-fg-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);
    }
      }

.ActionListContent[aria-expanded] + .ActionList--subGroup .ActionListContent {
        padding-left: var(--base-size-24, 24px);
      }

/* has 16px leading visual */

.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup .ActionListContent {
        padding-left: var(--base-size-32, 32px);
      }

/* has 20px leading visual */

.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup .ActionListContent {
        padding-left: var(--base-size-36, 36px);
      }

/* has 24px leading visual */

.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup .ActionListContent {
        padding-left: var(--base-size-40, 40px);
      }

.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, 600);
      }

.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, 16px)));
    }

/* show active indicator on parent collapse if child is active */

.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] {
      background: var(--color-action-list-item-default-selected-bg);
    }

.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label {
        font-weight: var(--base-text-weight-semibold, 600);
      }

.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, 8px));
        width: var(--base-size-4, 4px);
        height: var(--base-size-24, 24px);
        content: '';
        background: var(--color-accent-fg);
        border-radius: var(--yattho-borderRadius-medium, 6px);
      }

/* sizes */

.ActionListContent.ActionListContent--sizeLarge {
    --yattho-actionListContent-paddingBlock: var(--yattho-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
  }

.ActionListContent.ActionListContent--sizeXLarge {
    --yattho-actionListContent-paddingBlock: var(--yattho-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
  }

/* On pointer:coarse (mobile), all list items are large */

@media (pointer: coarse) {

.ActionListContent {
    --yattho-actionListContent-paddingBlock: var(--yattho-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
}
  }

/* 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;
}

/* wrapper span
 default block */

.ActionListItem-descriptionWrap {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: var(--base-size-4, 4px);
}

.ActionListItem-descriptionWrap .ActionListItem-label {
    font-weight: var(--base-text-weight-semibold, 600);
  }

/* inline */

.ActionListItem-descriptionWrap--inline {
  position: relative;
  flex-direction: row;
  align-items: baseline;
  gap: var(--base-size-8, 8px);
}

/* description */

.ActionListItem-description {
  font-size: var(--yattho-text-body-size-small, 12px);
  font-weight: var(--base-text-weight-normal, 400);
  line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
  color: var(--color-fg-muted);
}

/* helper for grid alignment with multi-line content
 span wrapping svg or text */

.ActionListItem-visual,
.ActionListItem-action {
  display: flex;
  min-height: var(--yattho-control-medium-lineBoxHeight, 20px);
  color: var(--color-fg-muted);
  pointer-events: none;
  fill: var(--color-fg-muted);
  align-items: center;
}

/* text */

.ActionListItem-label {
  position: relative;
  font-size: var(--yattho-text-body-size-medium, 14px);
  font-weight: var(--base-text-weight-normal, 400);
  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
  color: var(--color-fg-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(--yattho-text-body-size-small, 12px);
  line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
}

/* 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;
  }

.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction, .ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction {
      visibility: visible;
    }

/* ActionList::Divider */

/* with children */

.ActionList-sectionDivider:not(:empty) {
    display: flex;
    padding-inline: var(--yattho-actionListContent-paddingBlock);
    padding-block: var(--base-size-8, 8px);
    font-size: var(--yattho-text-body-size-small, 12px);
    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
    font-weight: var(--base-text-weight-semibold, 600);
    color: var(--color-fg-muted);
    flex-direction: column;
  }

/* no children */

.ActionList-sectionDivider:empty {
    display: block;
    height: var(--yattho-borderWidth-thin, 1px);
    padding: 0;
    margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));
    margin-block-end: var(--base-size-8, 8px);
    margin-inline: calc(-1 * var(--base-size-8, 8px));
    list-style: none;
    background: var(--color-action-list-item-inline-divider);
    border: 0;
  }

.ActionList-sectionDivider .ActionList-sectionDivider-title {
    font-size: var(--yattho-text-body-size-small, 12px);
    font-weight: var(--base-text-weight-semibold, 600);
    color: var(--color-fg-muted);
  }

.ActionList-sectionDivider--filled {
  margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));
  margin-block-end: var(--base-size-8, 8px);
  margin-inline: calc(-1 * var(--base-size-8, 8px));
  background: var(--color-canvas-subtle);
  border-top: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
  border-bottom: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);

  /* if no children, treat as divider */
}

.ActionList-sectionDivider--filled:empty {
    height: var(--base-size-8, 8px);
    box-sizing: border-box;
  }

.ActionList-sectionDivider--filled:first-child {
    margin-block-start: 0;
  }