/*copyright 2025 ploiu MIT License https://github.com/ploiu/Vanilla-JS-Accordions*/

:root {
    --accordion-title-background: #00c1cf;
    --accordion-body-border-color: transparent;
    --accordion-expand-rate: .25s;
    --accordion-open-title-background: #5acbe6;
    --accordion-border-radius: 10px;
    --accordion-fan-accordion-border-style: 1px solid #08838c;
    --accordion-title-text-transform: capitalize
}

accordion-element {
    width: 95%;
    height: unset;
    border-radius: var(--accordion-border-radius);
    margin-top: .1em;
    display: inline-block;
    &>.ploiu-accordion-title {
        background-color: var(--accordion-title-background);
        text-transform: var(--accordion-title-text-transform);
		font-weight: bold;
		font-size:1.2em;
		color: #FFFFFF;
        border-radius: inherit;
        padding: 1rem;
        &:hover {
            cursor: pointer
        }
    }
    &>.ploiu-accordion-body {
		/* 
		background-image: url(url-here);
		background-color: rgba(255, 255, 255, 0.96);
		background-blend-mode: lighten;
		background-position: top right;
		background-size: cover;
		*/
        border: 1px solid var(--accordion-body-border-color);
        width: 98%;
		margin: 0 auto;			
        transition: height var(--accordion-expand-rate);
        word-wrap: anywhere;
        overflow: hidden;
        &>accordion-element {
            margin-left: 1em
        }
    }
    &:not(.open) {
        &>.ploiu-accordion-body {
            border: 0;
            height: 0 !important
        }
    }
    &.open {
        height: max-content;
        &>.ploiu-accordion-title {
            background-color: var(--accordion-open-title-background);
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0
        }
    }
}

.ploiu-accordion-body p{
	margin: 15px;
}

.ploiu-accordion-body ul{
	list-style: disc;
	margin: 20px;
	padding: 0 50px 0 20px;
	font-size: 0.875rem;
}

accordion-fan {
    width: 95%;
    padding-top: 1vh;
    display: block;
    &>accordion-element {
        border: var(--accordion-fan-accordion-border-style);
        border-radius: 0;
        width: 100%;
        margin-top: -1vh;
        &>.ploiu-accordion-title {
            width: auto
        }
        &:first-child {
            border-top-left-radius: var(--accordion-border-radius);
            border-top-right-radius: var(--accordion-border-radius)
        }
        &:last-child {
            border-bottom-left-radius: var(--accordion-border-radius);
            border-bottom-right-radius: var(--accordion-border-radius)
        }
    }
}