.a-list {
  --padding-y: var(--lens-core-spacing-1-5);
  --padding-x: var(--lens-core-spacing-0);
  --section-gap: var(--lens-core-spacing-1);
  padding: 0;
  margin: 0;
  & li {
    list-style: none;
  }
  & ul {
    padding: 0;
  }
  &:has(.a-list-item--interactive) {
    --padding-x: var(--lens-core-spacing-1-5);
  }
  & > *:has(.a-list-group) ~ *:has(.a-list-group) {
    margin-top: var(--a-list-section-gap, var(--section-gap));
  }
  &.a-list--dense {
    --padding-y: var(--lens-core-spacing-1);
  }
  &.a-list--comfortable {
    --padding-y: var(--lens-core-spacing-3);
  }
}

.a-list-item {
  --bg: var(--a-list-item-bg, transparent);
  --color: var(--a-list-item-color, var(--lens-semantic-color-type-default));
  --border-color: var(--a-list-item-border-color, var(--lens-semantic-color-ui-divider-default));
  --border-width: var(--a-list-item-border-width, var(--lens-semantic-border-width-thin));
  --cursor: default;
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg);
  color: var(--color);
  cursor: var(--cursor);
  transition-property: background-color, color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &.a-list-item--divider {
    box-shadow: inset 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
  }
  &.a-list-item--disabled {
    --color: var(--lens-semantic-color-type-disabled);
    --cursor: not-allowed;
    & small {
      color: inherit;
    }
  }
  &.a-list-item--interactive {
    &:not(.a-list-item--disabled) {
      --cursor: pointer;
      &:hover {
        --bg: var(--lens-semantic-color-action-secondary-hover-fill);
      }
      &:active {
        --bg: var(--lens-semantic-color-action-secondary-active-fill);
      }
      & > button:focus-visible,
      & > a:focus-visible {
        outline: none;
        &::after {
          position: absolute;
          inset: 0;
          content: "";
          pointer-events: none;
          outline: var(--lens-semantic-border-width-focus-width) solid
            var(--lens-semantic-color-ui-focus-ring);
          outline-offset: calc(-2 * var(--lens-semantic-border-width-focus-offset));
          border-radius: inherit;
        }
      }
    }
    &:has(> .a-checkbox) {
      flex-direction: row;
      align-items: center;
      gap: 0;
    }
    &:has(.a-checkbox + label.a-list-item-content) {
      & .a-checkbox {
        margin-inline-start: var(--a-list-item-padding-x, var(--padding-x));
      }
      & .a-list-item-content {
        margin-inline-start: calc(
          (-1 * var(--lens-core-spacing-3)) - var(--a-list-item-padding-x, var(--padding-x))
        );
        padding-inline-start: calc(
          var(--lens-core-spacing-3) + var(--a-list-item-padding-x, var(--padding-x)) +
            var(--lens-core-spacing-2)
        );
      }
    }
  }
  &.a-list-item--selected {
    &:not(:has(> .a-checkbox))::before {
      display: block;
      position: absolute;
      content: "";
      inset-inline-start: 0;
      inset-block: var(--a-list-item-padding-y, var(--padding-y));
      width: var(--lens-core-spacing-0-25);
      background-color: var(--lens-semantic-color-action-secondary-inverse-selection-indicator);
      border-radius: var(--lens-semantic-border-radius-full);
    }
    &:not(.a-list-item--disabled) {
      --bg: var(--lens-semantic-color-selection-secondary-default);
      &:hover {
        --bg: var(--lens-semantic-color-selection-secondary-hover);
      }
      &:active {
        --bg: var(--lens-semantic-color-selection-secondary-active);
      }
    }
    &.a-list-item--disabled {
      --color: var(--lens-semantic-color-type-disabled);
    }
  }
}

.a-list-item-content {
  display: grid;
  column-gap: var(--lens-core-spacing-1-5);
  place-items: flex-start;
  align-items: center;
  flex-grow: 1;
  padding: var(--a-list-item-padding-y, var(--padding-y))
    var(--a-list-item-padding-x, var(--padding-x));
  color: inherit;
  &:is(button) {
    appearance: none;
    flex-direction: column;
    border: none;
    background: none;
    font: inherit;
  }
  &:is(button, label) {
    cursor: var(--cursor);
  }
  &:is(a) {
    text-decoration: none;
    color: unset;
  }
  & .a-list-item-primary-label {
    grid-row: 1;
  }
  & .a-list-item-secondary-label {
    grid-row: 2;
  }
  & .a-list-item-context-label {
    grid-row: 3;
  }
  & .a-list-item-leading,
  & .a-list-item-trailing {
    display: flex;
    align-self: center;
    grid-row-start: 1;
    grid-row-end: -1;
    &:is(svg),
    & svg {
      fill: var(--color);
    }
  }
  &:has(.a-list-item-leading):not(:has(.a-list-item-trailing)) {
    grid-template-columns: min-content 1fr;
    & .a-list-item-leading {
      grid-column: 1;
    }
    & .a-list-item-primary-label,
    & .a-list-item-secondary-label,
    & .a-list-item-context-label {
      grid-column: 2;
    }
  }
  &:has(.a-list-item-trailing):not(:has(.a-list-item-leading)) {
    grid-template-columns: 1fr min-content;
    & .a-list-item-trailing {
      grid-column: 2;
    }
    & .a-list-item-primary-label,
    & .a-list-item-secondary-label,
    & .a-list-item-context-label {
      grid-column: 1;
    }
  }
  &:has(.a-list-item-leading):has(.a-list-item-trailing) {
    grid-template-columns: min-content 1fr min-content;
    & .a-list-item-primary-label,
    & .a-list-item-secondary-label,
    & .a-list-item-context-label {
      grid-column: 2;
    }
  }
}

.a-list-item-primary-label {
  color: inherit;
  font-size: var(--lens-semantic-font-text-body-font-size);
  line-height: var(--lens-semantic-font-text-body-line-height);
  letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
  user-select: none;
}

.a-list-item-secondary-label {
  color: inherit;
  font-size: var(--lens-semantic-font-text-md-font-size);
  line-height: var(--lens-semantic-font-text-md-line-height);
  letter-spacing: var(--lens-semantic-font-text-md-letter-spacing);
  user-select: none;
}

.a-list-item-context-label {
  color: var(--lens-semantic-color-type-muted);
  font-size: var(--lens-semantic-font-text-sm-font-size);
  line-height: var(--lens-semantic-font-text-sm-line-height);
  letter-spacing: var(--lens-semantic-font-text-sm-letter-spacing);
  user-select: none;
}

.a-list-group-header {
  --border-color: var(
    --a-list-group-header-border-color,
    var(--lens-semantic-color-ui-divider-default)
  );
  --border-width: var(--a-list-group-header-border-width, var(--lens-semantic-border-width-thin));
  font-size: var(--lens-semantic-font-label-sm-font-size);
  line-height: var(--lens-semantic-font-label-sm-line-height);
  letter-spacing: var(--lens-semantic-font-label-sm-letter-spacing);
  font-weight: var(--lens-semantic-font-weight-emphasis);
  padding: var(--a-list-item-padding-y, var(--padding-y))
    var(--a-list-item-padding-x, var(--padding-x));
  box-shadow: inset 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
}