/**
 * Bootstrap accordion extended with EdGEL styles
 */

@use "../settings" as *;
@use "../tools" as *;

@import "bootstrap/scss/accordion";

.accordion-button {
  @include font-size($h3-font-size);
  font-weight: 600;
}

.accordion-button::after,
.accordion-icon-left::before {
  width: $accordion-icon-width;
  height: $accordion-icon-width;
  background-color: $brand-bg-text;
  background-position: center;
  background-size: 60%;
  @include border-radius(50%);
}

.accordion-icon-left {
  &::after {
    background-color: transparent;
    background-image: none;
  }

  &:not(.collapsed)::after {
    background-image: none;
  }

  &::before {
    flex-shrink: 0;
    margin-right: $accordion-button-padding-x;
    margin-left: 0;
    content: "";
    background-image: escape-svg($accordion-button-icon);
    background-repeat: no-repeat;
    @include transition($accordion-icon-transition);
  }

  &:not(.collapsed)::before {
    background-image: escape-svg($accordion-button-active-icon);
    transform: $accordion-icon-transform;
  }
}

.accordion-header {
  @include edgel-shadow-light();
  margin-top: space(1);
}

.accordion-body {
  @include edgel-shadow();
  background-color: $white;
}

@include media-breakpoint-up("sm") {
  .accordion-body-icon-left {
    padding-left: 4rem;
  }
}
