:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.
 */
:host {
  --background-color: transparent;
  --background-color-hover: var(--sl-panel-dark-background-color);
  --label-color-black: var(--sl-label-color-black);
  --label-color-very-dark: var(--sl-label-color-very-dark-gray);
  --label-color-dark: var(--sl-label-color-dark-gray);
  --label-color-medium: var(--sl-label-color-medium-gray);
  --label-color-light: var(--sl-label-color-light-gray);
  --label-color-very-light: var(--sl-label-color-very-light-gray);
  --background-color-active: var(--sl-selection-background-color-active);
  --label-color-black-active: var(--sl-selection-color-active);
  --label-color-very-dark-active: var(--sl-label-color-very-light-gray);
  --label-color-dark-active: var(--sl-label-color-very-light-gray);
  --label-color-medium-active: var(--sl-label-color-very-light-gray);
  --label-color-light-active: var(--sl-label-color-very-light-gray);
  --label-color-very-light-active: var(--sl-label-color-very-light-gray);
  display: flex;
}

.list-item {
  display: flex;
  flex: 1 1 auto;
  gap: var(--sl-spacing-small);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sl-spacing-x-small);
  border-radius: var(--sl-border-radius-medium);
  /*--sl-label-color-black: var(--sl-label-color-black);
  --sl-label-color-very-dark-gray: var(--label-color-very-dark);
  --sl-label-color-dark-gray: var(--label-color-dark);
  --sl-label-color-medium-gray: var(--label-color-medium);
  --sl-label-color-light-gray: var(--label-color-light);
  --sl-label-color-very-light-gray: var(--label-color-very-light);*/
  background: var(--background-color);
  color: var(--sl-label-color-black);
}
.list-item.list-item--active {
  outline: none;
  z-index: 1;
  --sl-label-color-black: var(--label-color-black-active);
  --sl-label-color-very-dark-gray: var(--label-color-very-dark-active);
  --sl-label-color-dark-gray: var(--label-color-dark-active);
  --sl-label-color-medium-gray: var(--label-color-medium-active);
  --sl-label-color-light-gray: var(--label-color-light-active);
  --sl-label-color-very-light-gray: var(--label-color-very-light-active);
  background: var(--background-color-active);
}
.list-item.list-item--center {
  align-items: center;
}

.list-item__content {
  flex-grow: 1;
  flex-shrink: 1;
  display: block;
  max-width: 100%;
  width: 1px;
}
.list-item__content ::slotted(sl-label) {
  --line-height--x-large: 1.4rem;
  --line-height--large: 1.4rem;
  --line-height--medium: 1.4rem;
  --line-height--small: 1.4rem;
  --line-height--x-small: 1.4rem;
  line-height: var(--sl-line-height-dense);
}

.list-item__prefix,
.list-item__suffix {
  min-width: var(--sl-spacing-x-large);
  padding: var(--sl-spacing-xxx-small) 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sl-spacing-small);
  height: 100%;
}

a.list-item {
  color: currentColor;
  text-decoration: none;
}
a.list-item:hover {
  background-color: var(--background-color-hover);
}

.list-item:not(.list-item--has-prefix) .list-item__prefix {
  display: none;
}
.list-item:not(.list-item--has-suffix) .list-item__suffix {
  display: none;
}