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

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

@import "bootstrap/scss/accordion";

.accordion-button {
  @include edgel-link-hover-decoration();
  @include edgel-focus-outline();
  @include font-size($h3-font-size);
  font-weight: 600;
}

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

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

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

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

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

.accordion-header {
  @include edgel-shadow-light();
  margin: ($accordion-border-width * -1) ($accordion-border-width * -1) 0;
  border: $accordion-border-width solid $accordion-button-bg;
}

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