// Accordion
// Modify bootstrap's accordion components
//

.accordion-button {
  position: relative;
  padding-left: 20px;

  &::before,
  &::after {
    position: absolute;
    top: var(--#{$prefix}accordion-btn-padding-y);
    display: block;
    float: left;
    width: 10px;
    height: 2px;
    margin-top: .7rem;
    content: "";
    background-color: $primary;
    border-radius: 1px;
    transition: $transition-base;
  }

  &::before {
    left: 0;
    opacity: 0;
    transform: rotate(-90deg);
  }

  &::after {
    left: 0;
    background-image: none;
  }

  &.collapsed {
    &::before {
      opacity: 1;
      transform: rotate(0);
    }
    &::after {
      background-image: none;
      transform: rotate(90deg);
    }
  }
}

.accordion-body {
  padding-left: 20px;

  .accordion {
    padding-bottom: $spacer;
  }
}