.list {
  list-style: none;
  overflow: clip;
  border-radius: var(--list-border-radius);
  border-style: var(--list-border-style);
  border-color: var(--list-border-color);
  border-width: var(--list-border-width);
}

.list .list-item {
  padding-inline: var(--list-item-padding-x);
  padding-block: var(--list-item-padding-y);
}
.list .list-item:has(> .list-link) {
  padding: 0;
}
.list .list-item > .list-link {
  padding-inline: var(--list-item-padding-x);
  padding-block: var(--list-item-padding-y);
}

.list-sm .list-item {
  padding-inline: var(--list-item-padding-x-sm);
  padding-block: var(--list-item-padding-y-sm);
}
.list-sm .list-item:has(> .list-link) {
  padding: 0;
}
.list-sm .list-item > .list-link {
  padding-inline: var(--list-item-padding-x-sm);
  padding-block: var(--list-item-padding-y-sm);
}

.list-md .list-item {
  padding-inline: var(--list-item-padding-x-md);
  padding-block: var(--list-item-padding-y-md);
}
.list-md .list-item:has(> .list-link) {
  padding: 0;
}
.list-md .list-item > .list-link {
  padding-inline: var(--list-item-padding-x-md);
  padding-block: var(--list-item-padding-y-md);
}

.list-lg .list-item {
  padding-inline: var(--list-item-padding-x-lg);
  padding-block: var(--list-item-padding-y-lg);
}
.list-lg .list-item:has(> .list-link) {
  padding: 0;
}
.list-lg .list-item > .list-link {
  padding-inline: var(--list-item-padding-x-lg);
  padding-block: var(--list-item-padding-y-lg);
}

.list:not(.list-bordered) .list-item,
.list:not(.list-bordered) .list-link {
  border-radius: var(--list-border-radius);
}

.list-bordered .list-item {
  border-bottom-width: var(--list-border-width);
  border-bottom-style: var(--list-border-style);
  border-bottom-color: var(--list-border-color);
}
.list-bordered .list-item:last-child {
  border-bottom-width: 0;
}

.list-borderless {
  border: none;
}
.list-borderless .list-item {
  border: none;
}

.list-inline {
  display: inline-flex;
  list-style: none;
  gap: var(--list-inline-gap);
  border-radius: var(--list-border-radius);
  border-style: var(--list-border-style);
  border-color: var(--list-border-color);
  border-width: var(--list-border-width);
}
.list-inline .list-item {
  align-self: center;
  border-radius: var(--list-border-radius);
}
.list-inline .list-item .list-link {
  align-self: center;
}

.list-unstyled {
  list-style: none;
}

.list-item.active:not(.no-action) {
  background-color: var(--list-item-active-background-color);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--list-item-active-background-color);
}

.list-link {
  display: block;
  width: 100%;
}
.list-link:focus-visible {
  outline: none;
  border-color: var(--text-color);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--text-color) 50%, transparent);
}

.list-hover .list-item:not(.no-action):hover {
  background-color: var(--list-item-hover-background-color);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--list-item-hover-background-color);
}
.list-hover .list-item:not(.no-action):active, .list-hover .list-item:not(.no-action).active {
  background-color: var(--list-item-active-background-color);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--list-item-active-background-color);
}

.list-item-hover:hover {
  background-color: var(--list-item-hover-background-color);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--list-item-hover-background-color);
}
.list-item-hover:active {
  background-color: var(--list-item-active-background-color);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--list-item-active-background-color);
}

.list-primary {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  color: var(--color-primary);
}
.list-primary .list-item {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.list-primary .list-item.active {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}
.list-primary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.list-secondary {
  border-color: color-mix(in srgb, var(--color-secondary) 50%, transparent);
  color: var(--color-secondary);
}
.list-secondary .list-item {
  border-color: color-mix(in srgb, var(--color-secondary) 50%, transparent);
}
.list-secondary .list-item.active {
  background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}
.list-secondary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary) 50%, transparent);
}

.list-tertiary {
  border-color: color-mix(in srgb, var(--color-tertiary) 50%, transparent);
  color: var(--color-tertiary);
}
.list-tertiary .list-item {
  border-color: color-mix(in srgb, var(--color-tertiary) 50%, transparent);
}
.list-tertiary .list-item.active {
  background-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}
.list-tertiary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-tertiary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary) 50%, transparent);
}

.list-success {
  border-color: color-mix(in srgb, var(--color-success) 50%, transparent);
  color: var(--color-success);
}
.list-success .list-item {
  border-color: color-mix(in srgb, var(--color-success) 50%, transparent);
}
.list-success .list-item.active {
  background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}
.list-success .list-link:focus-visible {
  outline: none;
  border-color: var(--color-success);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success) 50%, transparent);
}

.list-info {
  border-color: color-mix(in srgb, var(--color-info) 50%, transparent);
  color: var(--color-info);
}
.list-info .list-item {
  border-color: color-mix(in srgb, var(--color-info) 50%, transparent);
}
.list-info .list-item.active {
  background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}
.list-info .list-link:focus-visible {
  outline: none;
  border-color: var(--color-info);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info) 50%, transparent);
}

.list-warning {
  border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
  color: var(--color-warning);
}
.list-warning .list-item {
  border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.list-warning .list-item.active {
  background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}
.list-warning .list-link:focus-visible {
  outline: none;
  border-color: var(--color-warning);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning) 50%, transparent);
}

.list-danger {
  border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
  color: var(--color-danger);
}
.list-danger .list-item {
  border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
}
.list-danger .list-item.active {
  background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}
.list-danger .list-link:focus-visible {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.list-neutral {
  border-color: color-mix(in srgb, var(--color-neutral) 50%, transparent);
  color: var(--color-neutral);
}
.list-neutral .list-item {
  border-color: color-mix(in srgb, var(--color-neutral) 50%, transparent);
}
.list-neutral .list-item.active {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}
.list-neutral .list-link:focus-visible {
  outline: none;
  border-color: var(--color-neutral);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral) 50%, transparent);
}

.list-light {
  border-color: color-mix(in srgb, var(--color-light) 50%, transparent);
  color: var(--color-light);
}
.list-light .list-item {
  border-color: color-mix(in srgb, var(--color-light) 50%, transparent);
}
.list-light .list-item.active {
  background-color: color-mix(in srgb, var(--color-light) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}
.list-light .list-link:focus-visible {
  outline: none;
  border-color: var(--color-light);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light) 50%, transparent);
}

.list-dark {
  border-color: color-mix(in srgb, var(--color-dark) 50%, transparent);
  color: var(--color-dark);
}
.list-dark .list-item {
  border-color: color-mix(in srgb, var(--color-dark) 50%, transparent);
}
.list-dark .list-item.active {
  background-color: color-mix(in srgb, var(--color-dark) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}
.list-dark .list-link:focus-visible {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark) 50%, transparent);
}

.list-white {
  border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
  color: var(--color-white);
}
.list-white .list-item {
  border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
}
.list-white .list-item.active {
  background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}
.list-white .list-link:focus-visible {
  outline: none;
  border-color: var(--color-white);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white) 50%, transparent);
}

.list-black {
  border-color: color-mix(in srgb, var(--color-black) 50%, transparent);
  color: var(--color-black);
}
.list-black .list-item {
  border-color: color-mix(in srgb, var(--color-black) 50%, transparent);
}
.list-black .list-item.active {
  background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}
.list-black .list-link:focus-visible {
  outline: none;
  border-color: var(--color-black);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black) 50%, transparent);
}

.list-primary-ghost {
  border-color: color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
  color: var(--color-primary-ghost);
}
.list-primary-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
}
.list-primary-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}
.list-primary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-primary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
}

.list-secondary-ghost {
  border-color: color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
  color: var(--color-secondary-ghost);
}
.list-secondary-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
}
.list-secondary-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}
.list-secondary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-secondary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
}

.list-tertiary-ghost {
  border-color: color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
  color: var(--color-tertiary-ghost);
}
.list-tertiary-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
}
.list-tertiary-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}
.list-tertiary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-tertiary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
}

.list-success-ghost {
  border-color: color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
  color: var(--color-success-ghost);
}
.list-success-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
}
.list-success-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-success-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}
.list-success-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-success-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
}

.list-info-ghost {
  border-color: color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
  color: var(--color-info-ghost);
}
.list-info-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
}
.list-info-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-info-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}
.list-info-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-info-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
}

.list-warning-ghost {
  border-color: color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
  color: var(--color-warning-ghost);
}
.list-warning-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
}
.list-warning-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}
.list-warning-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-warning-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
}

.list-danger-ghost {
  border-color: color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
  color: var(--color-danger-ghost);
}
.list-danger-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
}
.list-danger-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}
.list-danger-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-danger-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
}

.list-neutral-ghost {
  border-color: color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
  color: var(--color-neutral-ghost);
}
.list-neutral-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
}
.list-neutral-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}
.list-neutral-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-neutral-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
}

.list-light-ghost {
  border-color: color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
  color: var(--color-light-ghost);
}
.list-light-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
}
.list-light-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-light-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}
.list-light-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-light-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
}

.list-dark-ghost {
  border-color: color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
  color: var(--color-dark-ghost);
}
.list-dark-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
}
.list-dark-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}
.list-dark-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-dark-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
}

.list-white-ghost {
  border-color: color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
  color: var(--color-white-ghost);
}
.list-white-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
}
.list-white-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-white-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}
.list-white-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-white-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
}

.list-black-ghost {
  border-color: color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
  color: var(--color-black-ghost);
}
.list-black-ghost .list-item {
  border-color: color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
}
.list-black-ghost .list-item.active {
  background-color: color-mix(in srgb, var(--color-black-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}
.list-black-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-black-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
}

.list-item-primary {
  color: var(--color-primary);
}
.list-item-primary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.list-item-secondary {
  color: var(--color-secondary);
}
.list-item-secondary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary) 50%, transparent);
}

.list-item-tertiary {
  color: var(--color-tertiary);
}
.list-item-tertiary .list-link:focus-visible {
  outline: none;
  border-color: var(--color-tertiary);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary) 50%, transparent);
}

.list-item-success {
  color: var(--color-success);
}
.list-item-success .list-link:focus-visible {
  outline: none;
  border-color: var(--color-success);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success) 50%, transparent);
}

.list-item-info {
  color: var(--color-info);
}
.list-item-info .list-link:focus-visible {
  outline: none;
  border-color: var(--color-info);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info) 50%, transparent);
}

.list-item-warning {
  color: var(--color-warning);
}
.list-item-warning .list-link:focus-visible {
  outline: none;
  border-color: var(--color-warning);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning) 50%, transparent);
}

.list-item-danger {
  color: var(--color-danger);
}
.list-item-danger .list-link:focus-visible {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.list-item-neutral {
  color: var(--color-neutral);
}
.list-item-neutral .list-link:focus-visible {
  outline: none;
  border-color: var(--color-neutral);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral) 50%, transparent);
}

.list-item-light {
  color: var(--color-light);
}
.list-item-light .list-link:focus-visible {
  outline: none;
  border-color: var(--color-light);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light) 50%, transparent);
}

.list-item-dark {
  color: var(--color-dark);
}
.list-item-dark .list-link:focus-visible {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark) 50%, transparent);
}

.list-item-white {
  color: var(--color-white);
}
.list-item-white .list-link:focus-visible {
  outline: none;
  border-color: var(--color-white);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white) 50%, transparent);
}

.list-item-black {
  color: var(--color-black);
}
.list-item-black .list-link:focus-visible {
  outline: none;
  border-color: var(--color-black);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black) 50%, transparent);
}

.list-item-primary-ghost {
  color: var(--color-primary-ghost);
}
.list-item-primary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-primary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
}

.list-item-secondary-ghost {
  color: var(--color-secondary-ghost);
}
.list-item-secondary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-secondary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
}

.list-item-tertiary-ghost {
  color: var(--color-tertiary-ghost);
}
.list-item-tertiary-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-tertiary-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
}

.list-item-success-ghost {
  color: var(--color-success-ghost);
}
.list-item-success-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-success-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
}

.list-item-info-ghost {
  color: var(--color-info-ghost);
}
.list-item-info-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-info-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
}

.list-item-warning-ghost {
  color: var(--color-warning-ghost);
}
.list-item-warning-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-warning-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
}

.list-item-danger-ghost {
  color: var(--color-danger-ghost);
}
.list-item-danger-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-danger-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
}

.list-item-neutral-ghost {
  color: var(--color-neutral-ghost);
}
.list-item-neutral-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-neutral-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
}

.list-item-light-ghost {
  color: var(--color-light-ghost);
}
.list-item-light-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-light-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
}

.list-item-dark-ghost {
  color: var(--color-dark-ghost);
}
.list-item-dark-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-dark-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
}

.list-item-white-ghost {
  color: var(--color-white-ghost);
}
.list-item-white-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-white-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
}

.list-item-black-ghost {
  color: var(--color-black-ghost);
}
.list-item-black-ghost .list-link:focus-visible {
  outline: none;
  border-color: var(--color-black-ghost);
  box-shadow: inset 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
}

.list-hover.list-primary .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}
.list-hover.list-primary .list-item:not(.no-action):active, .list-hover.list-primary .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}

.list-hover.list-secondary .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}
.list-hover.list-secondary .list-item:not(.no-action):active, .list-hover.list-secondary .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}

.list-hover.list-tertiary .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}
.list-hover.list-tertiary .list-item:not(.no-action):active, .list-hover.list-tertiary .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}

.list-hover.list-success .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}
.list-hover.list-success .list-item:not(.no-action):active, .list-hover.list-success .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}

.list-hover.list-info .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}
.list-hover.list-info .list-item:not(.no-action):active, .list-hover.list-info .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}

.list-hover.list-warning .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}
.list-hover.list-warning .list-item:not(.no-action):active, .list-hover.list-warning .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}

.list-hover.list-danger .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}
.list-hover.list-danger .list-item:not(.no-action):active, .list-hover.list-danger .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}

.list-hover.list-neutral .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}
.list-hover.list-neutral .list-item:not(.no-action):active, .list-hover.list-neutral .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}

.list-hover.list-light .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}
.list-hover.list-light .list-item:not(.no-action):active, .list-hover.list-light .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}

.list-hover.list-dark .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}
.list-hover.list-dark .list-item:not(.no-action):active, .list-hover.list-dark .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}

.list-hover.list-white .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}
.list-hover.list-white .list-item:not(.no-action):active, .list-hover.list-white .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}

.list-hover.list-black .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}
.list-hover.list-black .list-item:not(.no-action):active, .list-hover.list-black .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}

.list-hover.list-primary-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}
.list-hover.list-primary-ghost .list-item:not(.no-action):active, .list-hover.list-primary-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}

.list-hover.list-secondary-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}
.list-hover.list-secondary-ghost .list-item:not(.no-action):active, .list-hover.list-secondary-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}

.list-hover.list-tertiary-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}
.list-hover.list-tertiary-ghost .list-item:not(.no-action):active, .list-hover.list-tertiary-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}

.list-hover.list-success-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}
.list-hover.list-success-ghost .list-item:not(.no-action):active, .list-hover.list-success-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}

.list-hover.list-info-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}
.list-hover.list-info-ghost .list-item:not(.no-action):active, .list-hover.list-info-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}

.list-hover.list-warning-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}
.list-hover.list-warning-ghost .list-item:not(.no-action):active, .list-hover.list-warning-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}

.list-hover.list-danger-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}
.list-hover.list-danger-ghost .list-item:not(.no-action):active, .list-hover.list-danger-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}

.list-hover.list-neutral-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}
.list-hover.list-neutral-ghost .list-item:not(.no-action):active, .list-hover.list-neutral-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}

.list-hover.list-light-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}
.list-hover.list-light-ghost .list-item:not(.no-action):active, .list-hover.list-light-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}

.list-hover.list-dark-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}
.list-hover.list-dark-ghost .list-item:not(.no-action):active, .list-hover.list-dark-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}

.list-hover.list-white-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}
.list-hover.list-white-ghost .list-item:not(.no-action):active, .list-hover.list-white-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}

.list-hover.list-black-ghost .list-item:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}
.list-hover.list-black-ghost .list-item:not(.no-action):active, .list-hover.list-black-ghost .list-item:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}

.list-hover.list .list-item-primary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}
.list-hover.list .list-item-primary:not(.no-action):active, .list-hover.list .list-item-primary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}

.list-hover.list .list-item-secondary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}
.list-hover.list .list-item-secondary:not(.no-action):active, .list-hover.list .list-item-secondary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}

.list-hover.list .list-item-tertiary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}
.list-hover.list .list-item-tertiary:not(.no-action):active, .list-hover.list .list-item-tertiary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}

.list-hover.list .list-item-success:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}
.list-hover.list .list-item-success:not(.no-action):active, .list-hover.list .list-item-success:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}

.list-hover.list .list-item-info:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}
.list-hover.list .list-item-info:not(.no-action):active, .list-hover.list .list-item-info:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}

.list-hover.list .list-item-warning:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}
.list-hover.list .list-item-warning:not(.no-action):active, .list-hover.list .list-item-warning:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}

.list-hover.list .list-item-danger:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}
.list-hover.list .list-item-danger:not(.no-action):active, .list-hover.list .list-item-danger:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}

.list-hover.list .list-item-neutral:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}
.list-hover.list .list-item-neutral:not(.no-action):active, .list-hover.list .list-item-neutral:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}

.list-hover.list .list-item-light:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}
.list-hover.list .list-item-light:not(.no-action):active, .list-hover.list .list-item-light:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}

.list-hover.list .list-item-dark:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}
.list-hover.list .list-item-dark:not(.no-action):active, .list-hover.list .list-item-dark:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}

.list-hover.list .list-item-white:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}
.list-hover.list .list-item-white:not(.no-action):active, .list-hover.list .list-item-white:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}

.list-hover.list .list-item-black:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}
.list-hover.list .list-item-black:not(.no-action):active, .list-hover.list .list-item-black:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}

.list-hover.list .list-item-primary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}
.list-hover.list .list-item-primary-ghost:not(.no-action):active, .list-hover.list .list-item-primary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}

.list-hover.list .list-item-secondary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}
.list-hover.list .list-item-secondary-ghost:not(.no-action):active, .list-hover.list .list-item-secondary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}

.list-hover.list .list-item-tertiary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}
.list-hover.list .list-item-tertiary-ghost:not(.no-action):active, .list-hover.list .list-item-tertiary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}

.list-hover.list .list-item-success-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}
.list-hover.list .list-item-success-ghost:not(.no-action):active, .list-hover.list .list-item-success-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}

.list-hover.list .list-item-info-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}
.list-hover.list .list-item-info-ghost:not(.no-action):active, .list-hover.list .list-item-info-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}

.list-hover.list .list-item-warning-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}
.list-hover.list .list-item-warning-ghost:not(.no-action):active, .list-hover.list .list-item-warning-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}

.list-hover.list .list-item-danger-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}
.list-hover.list .list-item-danger-ghost:not(.no-action):active, .list-hover.list .list-item-danger-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}

.list-hover.list .list-item-neutral-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}
.list-hover.list .list-item-neutral-ghost:not(.no-action):active, .list-hover.list .list-item-neutral-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}

.list-hover.list .list-item-light-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}
.list-hover.list .list-item-light-ghost:not(.no-action):active, .list-hover.list .list-item-light-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}

.list-hover.list .list-item-dark-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}
.list-hover.list .list-item-dark-ghost:not(.no-action):active, .list-hover.list .list-item-dark-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}

.list-hover.list .list-item-white-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}
.list-hover.list .list-item-white-ghost:not(.no-action):active, .list-hover.list .list-item-white-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}

.list-hover.list .list-item-black-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}
.list-hover.list .list-item-black-ghost:not(.no-action):active, .list-hover.list .list-item-black-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}

.list-item-hover.list-item-primary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}
.list-item-hover.list-item-primary:not(.no-action):active, .list-item-hover.list-item-primary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}

.list-item-hover.list-item-secondary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}
.list-item-hover.list-item-secondary:not(.no-action):active, .list-item-hover.list-item-secondary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}

.list-item-hover.list-item-tertiary:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}
.list-item-hover.list-item-tertiary:not(.no-action):active, .list-item-hover.list-item-tertiary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}

.list-item-hover.list-item-success:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}
.list-item-hover.list-item-success:not(.no-action):active, .list-item-hover.list-item-success:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}

.list-item-hover.list-item-info:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}
.list-item-hover.list-item-info:not(.no-action):active, .list-item-hover.list-item-info:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}

.list-item-hover.list-item-warning:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}
.list-item-hover.list-item-warning:not(.no-action):active, .list-item-hover.list-item-warning:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}

.list-item-hover.list-item-danger:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}
.list-item-hover.list-item-danger:not(.no-action):active, .list-item-hover.list-item-danger:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}

.list-item-hover.list-item-neutral:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}
.list-item-hover.list-item-neutral:not(.no-action):active, .list-item-hover.list-item-neutral:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}

.list-item-hover.list-item-light:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}
.list-item-hover.list-item-light:not(.no-action):active, .list-item-hover.list-item-light:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}

.list-item-hover.list-item-dark:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}
.list-item-hover.list-item-dark:not(.no-action):active, .list-item-hover.list-item-dark:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}

.list-item-hover.list-item-white:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}
.list-item-hover.list-item-white:not(.no-action):active, .list-item-hover.list-item-white:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}

.list-item-hover.list-item-black:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}
.list-item-hover.list-item-black:not(.no-action):active, .list-item-hover.list-item-black:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}

.list-item-hover.list-item-primary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}
.list-item-hover.list-item-primary-ghost:not(.no-action):active, .list-item-hover.list-item-primary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}

.list-item-hover.list-item-secondary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}
.list-item-hover.list-item-secondary-ghost:not(.no-action):active, .list-item-hover.list-item-secondary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}

.list-item-hover.list-item-tertiary-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}
.list-item-hover.list-item-tertiary-ghost:not(.no-action):active, .list-item-hover.list-item-tertiary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}

.list-item-hover.list-item-success-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-success-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}
.list-item-hover.list-item-success-ghost:not(.no-action):active, .list-item-hover.list-item-success-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}

.list-item-hover.list-item-info-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-info-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}
.list-item-hover.list-item-info-ghost:not(.no-action):active, .list-item-hover.list-item-info-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}

.list-item-hover.list-item-warning-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}
.list-item-hover.list-item-warning-ghost:not(.no-action):active, .list-item-hover.list-item-warning-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}

.list-item-hover.list-item-danger-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}
.list-item-hover.list-item-danger-ghost:not(.no-action):active, .list-item-hover.list-item-danger-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}

.list-item-hover.list-item-neutral-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}
.list-item-hover.list-item-neutral-ghost:not(.no-action):active, .list-item-hover.list-item-neutral-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}

.list-item-hover.list-item-light-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-light-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}
.list-item-hover.list-item-light-ghost:not(.no-action):active, .list-item-hover.list-item-light-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}

.list-item-hover.list-item-dark-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}
.list-item-hover.list-item-dark-ghost:not(.no-action):active, .list-item-hover.list-item-dark-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}

.list-item-hover.list-item-white-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-white-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}
.list-item-hover.list-item-white-ghost:not(.no-action):active, .list-item-hover.list-item-white-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}

.list-item-hover.list-item-black-ghost:not(.no-action):hover {
  background-color: color-mix(in srgb, var(--color-black-ghost) 15%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}
.list-item-hover.list-item-black-ghost:not(.no-action):active, .list-item-hover.list-item-black-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}

.list-item-primary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary);
}

.list-item-secondary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary);
}

.list-item-tertiary:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary);
}

.list-item-success:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success);
}

.list-item-info:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info);
}

.list-item-warning:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning);
}

.list-item-danger:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger);
}

.list-item-neutral:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral);
}

.list-item-light:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light);
}

.list-item-dark:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark);
}

.list-item-white:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white);
}

.list-item-black:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black);
}

.list-item-primary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-primary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-primary-ghost);
}

.list-item-secondary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-secondary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-secondary-ghost);
}

.list-item-tertiary-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-tertiary-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-tertiary-ghost);
}

.list-item-success-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-success-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-success-ghost);
}

.list-item-info-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-info-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-info-ghost);
}

.list-item-warning-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-warning-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-warning-ghost);
}

.list-item-danger-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-danger-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-danger-ghost);
}

.list-item-neutral-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-neutral-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-neutral-ghost);
}

.list-item-light-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-light-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-light-ghost);
}

.list-item-dark-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-dark-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-dark-ghost);
}

.list-item-white-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-white-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-white-ghost);
}

.list-item-black-ghost:not(.no-action).active {
  background-color: color-mix(in srgb, var(--color-black-ghost) 30%, transparent);
  box-shadow: inset var(--list-item-border-width-inside-hover) var(--list-item-shadow-inset-reduce) var(--color-black-ghost);
}