.accordion {
  .accordion-item {
    &:first-of-type .accordion-button {
      border-top: 1px solid $background-grey;
    }

    .bg-primary & {
      background-color: $background-lightblue;
    }

    .bg-secondary & {
      background-color: #DFE5F2;
    }
  }

  .accordion-header {
    &::before {
      border-radius: rem-calc(6) 0 0 rem-calc(6);
    }

    .bg-primary & {
      background-color: $background-lightblue;
    }

    .bg-secondary & {
      background-color: #DFE5F2;
    }

    .accordion-button {
      outline: 0;

      &:not(.collapsed),
      & {
        color: $text-colors-body-color;
      }

      @include media-breakpoint-up(md) {
        font-size: rem-calc(20);
        font-weight: $font-weight-bold;
        line-height: 1.4;
      }

      .open-close {
        color: $text-colors-body-color;
      }

      &:focus {
        outline: 0;
        border-radius: rem-calc(6);
      }

      &:not(.collapsed) {
        border-radius: 0;
      }
    }

    &:hover {
      border-radius: rem-calc(6);

      .bg-primary &,
      .bg-secondary & {
        background-color: $background-colors-background-white;
      }

      .accordion-button {
        border-radius: rem-calc(6);
        border-color: transparent;
      }
    }
  }

  .accordion-item:has(+ .accordion-item:hover) {
    .accordion-collapse,
    .accordion-button {
      border-color: transparent;
    }
  }
}
