@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';

#{$component-prefix}list {
  @include typography.body-large;
  color: $sodra-black-60;
  background-color: $white;
  padding: 0;
  margin: 0;
  list-style: none;

  &__item {
    background-color: $white;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid $light-grey;
    position: relative;
  }

  &--autocomplete {
    position: absolute;
    left: 0;
    top: 3rem;
  }

  &--bullets &__item {
    &:before {
      display: inline-block;
      content: '• ';
      color: $dark-blue-50;
      left: 0.25rem;
      list-style: disc;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5;
      position: absolute;
      vertical-align: middle;
    }
  }

  &--light-grey {
    background-color: $light-grey;
  }

  &--light-grey &__item {
    background-color: $light-grey;
    border-color: $white;
  }
}