.accordion-header .accordion-button
{
	position: relative;
	overflow: hidden;
	background-color: var(--btn-color-blue);
	color: #ffffff;
	font-size: 1.1rem;
	/*z-index: 10;/* Add z-index for hover state */
}
.accordion-header .accordion-title
{
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: calc(100% - 20px);/* Adjust based on your icon width + padding */
}
/* Custom icon for the collapsed state */
.accordion-button.collapsed::after
{
	background-image: url('http://localhost:3000/icons/circle-white.svg');
	/*background-position: center;/* Center the icon */
	/*background-repeat: no-repeat;/* Prevent repeating */
	/*background-size: 20px 20px;/* Adjust icon size */
	
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	
	pointer-events: none;/* Prevents the icon from blocking hover effects */
}
/* Custom icon for the expanded state */
.accordion-button:not(.collapsed)::after
{
	background-image: url('http://localhost:3000/icons/circle-fill-white.svg');
	/*background-position: center;/* Center the icon */
	/*background-repeat: no-repeat;/* Prevent repeating */
	/*background-size: 20px 20px;/* Adjust icon size */
	
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	
	pointer-events: none;/* Prevents the icon from blocking hover effects */
}
/* Customize the focus box shadow */
.accordion-header .accordion-button:focus
{
	box-shadow: 0 0 0 0.25rem rgba(149, 176, 182, 0.4);/* rgb(87.1% 72.9% 36.5%) */
	border-color: var(--btn-color-blue-visited);
}
.accordion-header .accordion-button span.underlay
{
	content: '';
	position: absolute;
	background-color: var(--btn-color-blue-visited);
	height: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.accordion-header .accordion-button:hover span.underlay
{
	transform: scaleX(1);
}
.accordion-header .accordion-button:hover
{
	background-color: var(--btn-color-blue);
	color: #ffffff;
}
/* Allow text to wrap on smaller screens */
@media (max-width: 576px)
{
	.accordion-header .accordion-button
	{
		white-space: normal;
	}
}


// src/components/AccordionItem.js
import React from 'react';

const AccordionItem = ({ ariaExpanded, title, content, accordionId, itemIndex, disableParent }) => {
	
	const itemId = `${accordionId}-item-${itemIndex}`;// Unique ID for this item
	const collapseId = `${accordionId}-collapse-${itemIndex}`;// Unique ID for collapse div
	
	return (
		<div className="accordion-item">
			<h2 className="accordion-header" id={itemId}>
				<button
					className="accordion-button fw-bold"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target={`#${collapseId}`}// Use generated collapse ID
					aria-expanded={ariaExpanded ? "true" : "false"}
					aria-controls={collapseId}// Associate button with the collapse div
				>
					<span className="underlay"></span>
					<div className="accordion-title">{title}</div>
				</button>
			</h2>
			<div
				id={collapseId}
				className={`accordion-collapse collapse ${ariaExpanded ? 'show' : ''}`}
				aria-labelledby={itemId}
				data-bs-parent={disableParent ? null : `#${accordionId}`}// Conditionally set data-bs-parent
			>
				<div className="accordion-body">
					{content}
				</div>
			</div>
		</div>
	);
};

export default AccordionItem;

// src/components/BootstrapAccordion.js
import React from 'react';
import AccordionItem from './AccordionItem';

const BootstrapAccordion = ({ items, accordionId, disableParent }) => {
	
	return (
		<div id={accordionId} className="accordion">
			{items.map((item, index) => (
				<AccordionItem 
					key={index}
					ariaExpanded={item.ariaExpanded}
					title={item.title} 
					content={item.content} 
					accordionId={accordionId}
					itemIndex={index}
					disableParent={disableParent}
				/>
			))}
		</div>
	);
};

export default BootstrapAccordion;


The <span className="underlay"></span> is not working.
Also if the <div className="accordion-title">{title}</div> is too long, the text overflows past the icons and looks like shit.