:host {
  --wcs-list-item-padding: var(--wcs-semantic-spacing-large);
  --wcs-list-item-border-width: var(--wcs-semantic-border-width-default);
  --wcs-list-item-border-color: var(--wcs-semantic-color-border-secondary);
  --wcs-list-item-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-list-item-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-list-item-background-color-active: var(--wcs-semantic-color-background-action-secondary-selected-default);
  --wcs-list-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  --wcs-list-item-title-color: var(--wcs-semantic-color-text-primary);
  --wcs-list-item-title-font-weight: var(--wcs-semantic-font-weight-heavy);
  --wcs-list-item-title-line-height: var(--wcs-semantic-font-line-height-medium);
  --wcs-list-item-title-margin-bottom: var(--wcs-semantic-spacing-base);
  --wcs-list-item-icon-color: var(--wcs-semantic-color-text-secondary);
  --wcs-list-item-icon-margin-right: var(--wcs-semantic-spacing-large);
  --wcs-list-item-actions-margin-left: var(--wcs-semantic-spacing-base);
  display: flex;
  padding: var(--wcs-list-item-padding);
  border: solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);
  margin-bottom: calc(-1 * var(--wcs-list-item-border-width));
  background-color: var(--wcs-list-item-background-color-default);
}

:host(:hover) {
  background-color: var(--wcs-list-item-background-color-hover);
  transition: var(--wcs-list-item-transition-duration);
}

:host([activated]) {
  background-color: var(--wcs-list-item-background-color-active);
}

::slotted([slot=title]) {
  color: var(--wcs-list-item-title-color);
  margin-bottom: var(--wcs-list-item-title-margin-bottom);
  line-height: var(--wcs-list-item-title-line-height);
  font-weight: var(--wcs-list-item-title-font-weight);
  font-family: inherit;
}

::slotted([slot=icon]) {
  color: var(--wcs-list-item-icon-color);
  margin-right: var(--wcs-list-item-icon-margin-right);
}

::slotted([slot=actions]) {
  margin-left: var(--wcs-list-item-actions-margin-left);
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.header {
  display: flex;
  justify-content: space-between;
}