.accordion {
  @include border-radius(var(--#{$prefix}accordion-border-radius));
  border: 0;
  &:not(.accordion-alt):not(.accordion-flush) {
    padding-right: 0;
    padding-left: 0;
  }
  .accordion-button {
    font-weight: $font-weight-medium;
    &:not(.collapsed) {
      box-shadow: none;
    }
  }
  .accordion-body {
    padding-top: 0;
    @extend .fs-4;
  }
  .accordion-item {
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }
  &:not(.accordion-alt) .accordion-item:last-child {
    border-bottom: 0;
  }
}

.accordion-flush {
  --#{$prefix}accordion-box-shadow: #{$accordion-box-shadow};
  @include box-shadow(var(--#{$prefix}accordion-box-shadow));
  @include padding($spacer $spacer * 2);
  @include border-radius($border-radius);
  background-color: $white;
}

.accordion-alt {
  --#{$prefix}accordion-alt-bg: #{$accordion-alt-bg};
  --#{$prefix}accordion-alt-btn-bg: #{$accordion-alt-button-bg};
  --#{$prefix}accordion-alt-border-width: #{$accordion-alt-border-width};
  --#{$prefix}accordion-alt-border-active-width: #{$accordion-alt-border-active-width};
  --#{$prefix}accordion-alt-border-color: #{$accordion-alt-border-color};
  --#{$prefix}accordion-alt-border-radius: #{$accordion-alt-border-radius};
  --#{$prefix}accordion-alt-btn-icon-width: #{$accordion-alt-icon-width};
  --#{$prefix}accordion-alt-btn-icon: #{escape-svg($accordion-alt-button-icon)};
  --#{$prefix}accordion-alt-btn-active-icon: #{escape-svg($accordion-alt-button-active-icon)};
  --#{$prefix}accordion-alt-active-color: #{$accordion-alt-button-active-color};

  @include box-shadow(none);

  .accordion-button {
    margin-bottom: 0;
    background-color: transparent;
    @include box-shadow(none);

    i {
      width: var(--#{$prefix}accordion-alt-btn-icon-width);
      height: var(--#{$prefix}accordion-alt-btn-icon-width);
      margin-right: $spacer * .5;
    }

    &:not(.collapsed) {
      @include box-shadow(none);

      &::after {
        background-image: var(--#{$prefix}accordion-alt-btn-active-icon);
        transform: var(--#{$prefix}accordion-btn-icon-transform);
      }
    }

    &::after {
      width: var(--#{$prefix}accordion-btn-icon-width);
      height: var(--#{$prefix}accordion-btn-icon-width);
      background-image: var(--#{$prefix}accordion-alt-btn-icon);
    }
  }

  > .accordion-item {
    background-color: var(--#{$prefix}accordion-alt-bg);
    border: var(--#{$prefix}accordion-alt-border-width) solid transparent;
    @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
    @include transition(var(--#{$prefix}accordion-transition));
    &:hover {
      border-color: var(--#{$prefix}accordion-alt-border-color);
    }
    &:has(.accordion-collapse.show),
    &:has(.accordion-collapse.collapsing) {
      background-color: $white;
      border-color: var(--#{$prefix}accordion-alt-border-color);
      //stylelint-disable-next-line function-disallowed-list
      box-shadow: 0 0 0 calc(var(--#{$prefix}accordion-alt-border-active-width) - var(--#{$prefix}accordion-alt-border-width)) var(--#{$prefix}accordion-alt-border-color);
    }

    &:not(:last-child) {
      @include margin-bottom($spacer);
    }

    // stylelint-disable selector-max-class
    > .accordion-header .accordion-button {
      &,
      &.collapsed {
        @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
      }
    }

    // stylelint-enable selector-max-class

    > .accordion-collapse {
      @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
    }

    .accordion-body {
      padding-top: 0;

      &.has-icon {
        padding-left: $spacer * 3.125;
      }
    }
  }
}