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

	display: block;
	--hub-accordion-color: #212529;
	--hub-accordion-bg: #fff;
	--hub-accordion-transition:
		color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
		border-radius 0.15s ease;
	--hub-accordion-border-color: rgba(0, 0, 0, 0.125);
	--hub-accordion-border-width: 1px;
	--hub-accordion-border-radius: 0.25rem;
	--hub-accordion-inner-border-radius: calc(0.25rem - 1px);
	--hub-accordion-btn-padding-x: 1.25rem;
	--hub-accordion-btn-padding-y: 1rem;
	--hub-accordion-btn-color: #212529;
	--hub-accordion-btn-bg: #fff;
	--hub-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23{accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	--hub-accordion-btn-icon-width: 1.25rem;
	--hub-accordion-btn-icon-transform: rotate(-180deg);
	--hub-accordion-btn-icon-transition: transform 0.2s ease-in-out;
	--hub-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	--hub-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	--hub-accordion-body-padding-x: 1.25rem;
	--hub-accordion-body-padding-y: 1rem;
	--hub-accordion-active-color: #0c63e4;
	--hub-accordion-active-bg: #e7f1ff;

	&.hub-accordion-flush {
		> .hub-accordion-panel {
			border-right: 0;
			border-left: 0;
			border-radius: 0;

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

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

			> .hub-accordion-collapse,
			> .hub-accordion-header .hub-accordion-button,
			> .hub-accordion-header .hub-accordion-button.collapsed {
				border-radius: 0;
			}
		}
	}
}

.hub-accordion-panel {
	display: block;

	color: var(--hub-accordion-color);
	background-color: var(--hub-accordion-bg);
	border: var(--hub-accordion-border-width) solid
		var(--hub-accordion-border-color);

	&:first-of-type {
		border-top-left-radius: var(--hub-accordion-border-radius);
		border-top-right-radius: var(--hub-accordion-border-radius);

		> .hub-accordion-header .hub-accordion-button {
			border-top-left-radius: var(--hub-accordion-inner-border-radius);
			border-top-right-radius: var(--hub-accordion-inner-border-radius);
		}
	}

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

	&:last-of-type {
		border-bottom-left-radius: var(--hub-accordion-border-radius);
		border-bottom-right-radius: var(--hub-accordion-border-radius);

		> .hub-accordion-header .hub-accordion-button.collapsed {
			border-bottom-left-radius: var(--hub-accordion-inner-border-radius);
			border-bottom-right-radius: var(
				--hub-accordion-inner-border-radius
			);
		}

		> .hub-accordion-collapse {
			border-bottom-left-radius: var(--hub-accordion-border-radius);
			border-bottom-right-radius: var(--hub-accordion-border-radius);
		}
	}

	.hub-accordion-button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		padding: var(--hub-accordion-btn-padding-y)
			var(--hub-accordion-btn-padding-x);
		font-size: 1rem;
		color: var(--hub-accordion-btn-color);
		text-align: left;
		background-color: var(--hub-accordion-btn-bg);
		border: 0;
		border-radius: 0;
		overflow-anchor: none;
		transition: var(--hub-accordion-transition);
		cursor: pointer;

		&:not(.collapsed) {
			color: var(--hub-accordion-active-color);
			background-color: var(--hub-accordion-active-bg);
			box-shadow: inset 0 calc(-1 * var(--hub-accordion-border-width)) 0
				var(--hub-accordion-border-color);

			&::after {
				transform: var(--hub-accordion-btn-icon-transform);
			}
		}

		&::after {
			flex-shrink: 0;
			width: var(--hub-accordion-btn-icon-width);
			height: var(--hub-accordion-btn-icon-width);
			margin-left: auto;
			content: '';
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1.5 3.5l5 5-5 5h1l5-5-5-5h-1z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-size: var(--hub-accordion-btn-icon-width);
			transition: var(--hub-accordion-btn-icon-transition);
		}

		&:hover {
			z-index: 2;
		}

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

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

	.hub-accordion-body {
		padding: var(--hub-accordion-body-padding-y)
			var(--hub-accordion-body-padding-x);
	}
}