.selectable-list-item-wrapper {
  position: relative;
}

.selectable-list-item {
  cursor: pointer;
  padding: 16px;

  &--selected {
    background: var(--color-primary-muted);
  }

  &:not(.selectable-list-item--selected) {
    &:hover,
    &:focus-within {
      background: var(--color-background-default-hover);
    }
  }

  &__selected-indicator {
    width: 4px;
    height: calc(100% - 8px);
    position: absolute;
    top: 4px;
    left: 4px;
  }
}
