//
// Base styles
//

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

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

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

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

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

	&:hover {
		z-index: 2;
	}

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

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

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

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

		> .accordion-header .accordion-button {
			@include border-top-radius(var(--#{$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-bottom-radius(var(--#{$prefix}accordion-border-radius));

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

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

.accordion-body {
	padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$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(0);

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

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

		> .accordion-collapse {
			@include border-radius(0);
		}
	}
}

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