// Accordions styles.

.accordion {
  margin-bottom: $padding-padding-xxlg;
}

.accordion-item {
  border: none;
  border-radius: 0;
  .accordion-header {
    margin: 0;
    display: flex;
    background: $white;
    position: relative;
    &::before {
      content:'';
      width: 10px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
    }
    &:hover {
      background-color: $background-colors-background-lightblue;
      &::before {
        background: $primary;
      }
    }
    .accordion-button {
      border-radius: 0;
      @include text-style-subheadline-sub-1;
      color: $text-primary;
      align-items: flex-start;
      background: transparent;
      padding: $padding-padding-sm 0 $radius-radius-sm $padding-padding-xxlg;
      display: flex;
      align-items: center;
      border-bottom: 1px solid $background-grey;

      @include media-breakpoint-up(md) {
        padding: $padding-padding-lg 0 $radius-radius-lg $padding-padding-xxlg;
      }

      &:focus {
        outline: 2px auto $primary;
      }

      &::after {
        display: none;
      }
      .open-close {
        color: $primary;
        margin-right: $padding-padding-sm;
      }
      .svg-inline--fa {
        width: rem-calc(14);
        height: rem-calc(16);
      }
      &.collapsed {
        border-radius: 0;
        box-shadow: none;
        border-radius: 0;
        .fa-minus {
          display: none;
        }
        .fa-plus {
          display: block;
        }
      }
      &:not(.collapsed) {
        color: $text-primary;
        border-bottom: none;
        box-shadow: none;
        .fa-minus {
          display: block;
        }
        .fa-plus {
          display: none;
        }
        .open-close {
          margin-right: 16px;

          @include media-breakpoint-up(xl) {
            margin-right: 56px;
          }
        }
      }
    }
  }
  .accordion-collapse {
    @include text-style-body-body-1();
    padding: $padding-padding-xxs 0px $padding-padding-lg 70px;
    border-bottom: 1px solid $background-grey;

    @include media-breakpoint-up(md) {
      padding: $padding-padding-lg 80px $padding-padding-xxlg 70px;
    }

    @include media-breakpoint-up(xl) {
      padding: $padding-padding-lg 80px $padding-padding-xxlg 110px;
    }
  }
  &:last-of-type {
    > .accordion-collapse,
    > .accordion-header .accordion-button.collapsed {
      border-radius: 0;
    }
  }
}
