.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Hide default icon */
.accordion summary::-webkit-details-marker {
    display: none;
}

/* Hide default icon */
.accordion summary::marker {
    content: '';
}

.accordion .item {
    background: var(--white);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.accordion .heading {
    position: relative;
    padding: 1rem 2.5rem 1rem 1.5rem;
    transition-duration: 0.3s;
    cursor: pointer;
    font-weight: 500;
}

.accordion .heading:hover {
    background: var(--link-color-hover);
    color: var(--white);
}

.accordion .open > .heading {
    background: var(--link-color);
    color: var(--white);
}

.accordion .heading:focus-visible:after {
    /* Accessibility */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in oklab, var(--color-1) 25%, transparent);
}

.accordion .icon {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    transform-origin: center;
    width: 0.8rem;
    height: 0.8rem;
    transition-duration: var(--transition-duration);
}

.accordion .icon:before,
.accordion .icon:after {
    content: "";
    display: block;
    position: absolute;
    background: var(--text-color);
}

.accordion .heading:hover .icon:before,
.accordion .heading:hover .icon:after,
.accordion .open > .heading .icon:before,
.accordion .open > .heading .icon:after {
    background: var(--white);
}

.accordion .content {
    overflow: hidden;
    height: 0;
    transition: height var(--transition-duration) ease;
}

.accordion .inner-content {
    padding: var(--spacing-small);
}

/* Plus to cross */
.accordion .icon:before {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
}

.accordion .icon:after {
    top: 0;
    right: 50%;
    transform: translateX(50%);
    width: 2px;
    height: 100%;
}

.accordion .open > .heading > .icon {
    transform: translateY(-50%) rotate(-135deg);
}

/* Plus to minus 
.accordion .icon:before {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 2px;
}

.accordion .icon:after {
	top: 0;
	right: 50%;
	transform: translateX(50%);
	width: 2px;
	height: 100%;
}

.accordion .open > .heading > .icon:after {
	display: none;
} */
/* Chevron rotate
.accordion .item > .heading > .icon {
	top: calc(50% - 0.15rem);
	width: 0.5rem;
	height: 0.5rem;
	border-left: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
	transform: translateY(-50%) rotate(-45deg);
}

.accordion .item > .heading:hover > .icon {
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
}

.accordion .open > .heading > .icon {
	top: 50%;
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: translateY(-50%) rotate(135deg);
} */