.accordion {
  @include shadow-panel;
  margin: $gap * 3 0;
  max-width: $max-panel-width;

  &__header {
    padding: $gap * 2 $gap * 3;
    background-color: $color-white;

    &-text {
      margin: 0;
    }
  }

  &__button {
    margin: 0;
  }

  &__content {
    padding: 0 ($gap * 3) $gap;

    &--list-item {
      border-bottom: 1px solid $color-gray-lightest;
      padding: $gap 0;

      &:last-child {
        border-bottom: none;
        padding-bottom: $gap;
      }

      .col {
        padding-right: $gap * 2;

        &:last-child {
          padding-right: 0;
        }
      }

      h4 {
        margin: $gap * 2 0 $gap;
      }

      h5 {
        font-size: 1rem;
        color: $color-gray;
        margin: 0;
      }
    }

    &--empty {
      font-weight: $font-bold;
      color: $color-gray-dark;
      padding: $gap * 8;
      text-align: center;
    }
  }

  &-list {
    max-width: $max-panel-width;

    &__collapse {
      cursor: pointer;
    }
  }
}