Bootstrap/scss/_accordion.scss

@use "functions";
@use "mixins/border-radius";
@use "mixins/color-mode";
@use "mixins/transition";
@use "variables";
@use "vendor/rfs";

//
// Base styles
//

.accordion {
  // scss-docs-start accordion-css-vars
  --#{variables.$prefix}accordion-color: #{variables.$accordion-color};
  --#{variables.$prefix}accordion-bg: #{variables.$accordion-bg};
  --#{variables.$prefix}accordion-transition: #{variables.$accordion-transition};
  --#{variables.$prefix}accordion-border-color: #{variables.$accordion-border-color};
  --#{variables.$prefix}accordion-border-width: #{variables.$accordion-border-width};
  --#{variables.$prefix}accordion-border-radius: #{variables.$accordion-border-radius};
  --#{variables.$prefix}accordion-inner-border-radius: #{variables.$accordion-inner-border-radius};
  --#{variables.$prefix}accordion-btn-padding-x: #{variables.$accordion-button-padding-x};
  --#{variables.$prefix}accordion-btn-padding-y: #{variables.$accordion-button-padding-y};
  --#{variables.$prefix}accordion-btn-color: #{variables.$accordion-button-color};
  --#{variables.$prefix}accordion-btn-bg: #{variables.$accordion-button-bg};
  --#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg(variables.$accordion-button-icon)};
  --#{variables.$prefix}accordion-btn-icon-width: #{variables.$accordion-icon-width};
  --#{variables.$prefix}accordion-btn-icon-transform: #{variables.$accordion-icon-transform};
  --#{variables.$prefix}accordion-btn-icon-transition: #{variables.$accordion-icon-transition};
  --#{variables.$prefix}accordion-btn-active-icon: #{functions.escape-svg(variables.$accordion-button-active-icon)};
  --#{variables.$prefix}accordion-btn-focus-box-shadow: #{variables.$accordion-button-focus-box-shadow};
  --#{variables.$prefix}accordion-body-padding-x: #{variables.$accordion-body-padding-x};
  --#{variables.$prefix}accordion-body-padding-y: #{variables.$accordion-body-padding-y};
  --#{variables.$prefix}accordion-active-color: #{variables.$accordion-button-active-color};
  --#{variables.$prefix}accordion-active-bg: #{variables.$accordion-button-active-bg};
  // scss-docs-end accordion-css-vars
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--#{variables.$prefix}accordion-btn-padding-y) var(--#{variables.$prefix}accordion-btn-padding-x);
  @include rfs.font-size(variables.$font-size-base);
  color: var(--#{variables.$prefix}accordion-btn-color);
  text-align: left; // Reset button style
  background-color: var(--#{variables.$prefix}accordion-btn-bg);
  border: 0;
  @include border-radius.border-radius(0);
  overflow-anchor: none;
  @include transition.transition(var(--#{variables.$prefix}accordion-transition));

  &:not(.collapsed) {
    color: var(--#{variables.$prefix}accordion-active-color);
    background-color: var(--#{variables.$prefix}accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--#{variables.$prefix}accordion-border-width)) 0 var(--#{variables.$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list

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

  // Accordion icon
  &::after {
    flex-shrink: 0;
    width: var(--#{variables.$prefix}accordion-btn-icon-width);
    height: var(--#{variables.$prefix}accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--#{variables.$prefix}accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--#{variables.$prefix}accordion-btn-icon-width);
    @include transition.transition(var(--#{variables.$prefix}accordion-btn-icon-transition));
  }

  &:hover {
    z-index: 2;
  }

  &:focus {
    z-index: 3;
    outline: 0;
    box-shadow: var(--#{variables.$prefix}accordion-btn-focus-box-shadow);
  }
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  color: var(--#{variables.$prefix}accordion-color);
  background-color: var(--#{variables.$prefix}accordion-bg);
  border: var(--#{variables.$prefix}accordion-border-width) solid var(--#{variables.$prefix}accordion-border-color);

  &:first-of-type {
    @include border-radius.border-top-radius(var(--#{variables.$prefix}accordion-border-radius));

    > .accordion-header .accordion-button {
      @include border-radius.border-top-radius(var(--#{variables.$prefix}accordion-inner-border-radius));
    }
  }

  &:not(:first-of-type) {
    border-top: 0;
  }

  // Only set a border-radius on the last item if the accordion is collapsed
  &:last-of-type {
    @include border-radius.border-bottom-radius(var(--#{variables.$prefix}accordion-border-radius));

    > .accordion-header .accordion-button {
      &.collapsed {
        @include border-radius.border-bottom-radius(var(--#{variables.$prefix}accordion-inner-border-radius));
      }
    }

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

.accordion-body {
  padding: var(--#{variables.$prefix}accordion-body-padding-y) var(--#{variables.$prefix}accordion-body-padding-x);
}


// Flush accordion items
//
// Remove borders and border-radius to keep accordion items edge-to-edge.

.accordion-flush {
  > .accordion-item {
    border-right: 0;
    border-left: 0;
    @include border-radius.border-radius(0);

    &:first-child { border-top: 0; }
    &:last-child { border-bottom: 0; }

    // stylelint-disable selector-max-class
    > .accordion-collapse,
    > .accordion-header .accordion-button,
    > .accordion-header .accordion-button.collapsed {
      @include border-radius.border-radius(0);
    }
    // stylelint-enable selector-max-class
  }
}

@if variables.$enable-dark-mode {
  @include color-mode.color-mode(dark) {
    .accordion-button::after {
      --#{variables.$prefix}accordion-btn-icon: #{functions.escape-svg($accordion-button-icon-dark)};
      --#{variables.$prefix}accordion-btn-active-icon: #{functions.escape-svg($accordion-button-active-icon-dark)};
    }
  }
}