.dropper {
  @include flex(0, initial, center, column);

  width: 100%;

  color: $color-white;

  overflow: hidden;
  box-shadow: $shadow-grey;

  &--active .dropper__arrow {
    transform: rotate(90deg);
  }

  &__heading {
    @include flex(0, space-between, center);

    align-self: stretch;

    padding: 1.2rem 2.2rem;

    background-color: $color-primary-regular;
    transition: $transition-regular;
    cursor: pointer;

    &:hover {
      background-color: $color-primary-light;
    }
  }

  &__title {
    font-family: $font-family-headings;
    font-size: $font-size-larger;
    font-weight: 500;
  }

  &__arrow {
    font-size: $font-size-large;

    transition: $transition-regular;
  }

  &__content-wrapper {
    width: 100%;
    height: 0;

    transition: all 0.4s ease-in;
  }

  &__content {
    @include flex(2.4rem, initial, initial, column);

    width: 100%;

    padding: 2.4rem 3.6rem;

    background-color: $color-grey-regular;
  }

  &__text {
    font-family: $font-family-regular;
    font-weight: 400;
    line-height: 140%;
    hyphens: auto;
  }

  &__list {
    padding-left: 1.6rem;

    list-style: square;
  }

  &__list-item {
    text-transform: capitalize;
  }
}
