.collapsibleListItem {
  font: var(--grapes-body-m);
  position: relative;
  display: flex;
  align-items: center;
  height: var(--grapes-unit-64);
  padding: 0 var(--grapes-unit-16);
  background-color: var(--grapes-color-background-primary-default);
  transition: background-color var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
  gap: var(--grapes-unit-16);

  &:not(.collapsibleListItemAsHeader) {
    border-top: 1px solid var(--grapes-color-border-default);
  }

  &:not(.collapsibleListItemAsHeader):hover {
    background-color: var(--grapes-color-background-primary-hover);
  }
}

.collapsibleListItemAsHeader {
  padding-bottom: 1px;
  border-radius: var(--grapes-border-radius-8);
  font: var(--grapes-title-m);
}

.collapsibleListItemAsHeaderNotCollapsed {
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
  background-color: var(--grapes-color-background-secondary-default);
}

.collapsibleListItemIsActive {
  background-color: var(--grapes-color-background-primary-selected);
}

.collapsibleListItemIsAlert {
  background-color: var(--grapes-color-background-secondary-alert-default);
}

.collapsibleListItemContent {
  color: var(--grapes-color-content-primary);
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  text-align: inherit;
  font: inherit;
  background: none;
  cursor: pointer;
}