Simple Accordion

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-simple-accordion {
	padding: 4rem 0;
	border-radius: 30px;

	@include bp($md){
		border-radius: 50px;
	}

	&__heading{
		position: sticky;
		top: 10rem;
		margin-bottom: 1.5rem;

		@include bp($md){
			margin-bottom: 0;
		}

		*{
			color: var(--text-color);
			@include fluid-type(24, 44);
			font-weight: 700;
		}
	}

	&__content{
		color: var(--text-color);
	}

	&__accordion{
		margin-top: 2rem;
	}

	&__item{
		&.active{
			.ico--indicator{
				&::after{
					display: none;
				}
			}
		}

		&-content{
			padding-top: 1.5rem;

			h1, h2, h3, h4, h5, h6{
				color: var(--text-color);
			}
		}

		&-head{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 1.5rem 0;
			cursor: pointer;
			margin-bottom: 0;
			border-bottom: solid 1px var(--text-color);
			gap: 2rem;

			@include bp($lg){
				gap: 0;
				align-items: center;
			}

			&:hover, &:focus{
				.ico--indicator{
					background-color: var(--white);
					transition: .3s ease-in-out;
					&::before, &::after{
						background-color: var(--primary);
						transition: .3s ease-in-out;
					}
				}

				// .block-simple-accordion__item-btn{
				// 	background-color: var(--secondary);
				// 	transition: .3s ease-in-out;
				// }
			}
		}

		&-body{
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s ease-in-out;
		}

		&-title{
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			gap: 16px;

			@include bp($md){
				gap: 32px;
				align-items: center;
			}

			.title{
				@include fluid-type(16, 28);
				color: var(--text-color);
				font-weight: 600;
				align-self: center;

			}
		}

		&-btn{
			border: solid 1px var(--secondary);
			color: var(--text-color);
			padding: 16px 32px;
			text-transform: uppercase;
			border-radius: 100px;
			font-weight: 700;
			@include fluid-type(16, 20);
			transition: .3s ease-in-out;
			text-decoration: none;

			&:hover, &:focus{
				background-color: var(--secondary);
				transition: .3s ease-in-out;
			}
		}

		.ico--indicator{
			width: 30px;
			height: 30px;
			min-width: 30px;
			min-height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100px;
			border: solid 1px var(--white);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 15px;
			position: relative;
			cursor: pointer;
			transition: .3s ease-in-out;

			@include bp($md){
				width: 44px;
				height: 44px;
				min-width: 44px;
				min-height: 44px;
				background-size: 24px;
			}

			&:hover, &:focus{
				background-color: var(--white);
				transition: .3s;

				&::before, &::after{
					background-color: var(--primary);
					transition: .3s ease-in-out;
				}
			}

			&::before{
				content: '';
				width: 15px;
				height: 1px;
				background-color: var(--white);
				transition: .3s ease-in-out;

				@include bp($md){
					width: 20px;

				}
			}

			&::after{
				content: '';
				width: 1px;
				height: 15px;
				background-color: var(--white);
				position: absolute;
				left: 50%;
				transition: .3s ease-in-out;

				@include bp($md){
					height: 20px;
				}
			}
		}
	}

	&:not(.has-background), &.has-secondary-background-color{
		--text-color: var(--primary);
		.block-simple-accordion__item-btn{
			padding: 0;
		}

		.block-simple-accordion__item-head{
			&:hover, &:focus{
				.ico--indicator{
					background-color: var(--primary);

					&::before{
						background-color: var(--white);
					}

					&::after{
						background-color: var(--white);
					}
				}
			}
		}

		.ico--indicator{
			border: solid 1px var(--primary);

			&:hover, &:focus{
				background-color: var(--primary);

				&::before, &::after{
					background-color: var(--white);
				}
			}

			&::before{
				background-color: var(--primary);
			}

			&::after{
				background-color: var(--primary);
			}
		}
	}

	&:not(.has-background), &.has-tertiary-background-color{
		.block-simple-accordion__item-btn{
			padding: 16px 32px;
		}
	}

	&.has-secondary-background-color{
		.block-simple-accordion__item-btn{
			border-color: var(--primary);
			padding: 16px 32px;

			&:hover{
				border-color: var(--primary);
				background-color: var(--primary);
				color: var(--white);
			}
		}

		.content{
			li{
				&::before{
					background: var(--primary);
				}

			}

			h1, h2, h3, h4, h5, h6{
				color: var(--text-color);
			}
		}
	}
}

class SimpleAccordion {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-simple-accordion');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const accordionItems = block.querySelectorAll('.block-simple-accordion__item');
			accordionItems.forEach((item) => {
				const head = item.querySelector('.block-simple-accordion__item-head');
				const body = item.querySelector('.block-simple-accordion__item-body');
				head.addEventListener('click', () => {
					item.classList.toggle('active');
					if (body.style.maxHeight) {
						body.style.maxHeight = null;
					} else {
						body.style.maxHeight = body.scrollHeight + "px";
					}
				});
			});

		});
	}
}

new SimpleAccordion();

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/simple-accordion",
    "title": "Simple Accordion",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-simple-accordion.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Example",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/simple-accordion/block-simple-accordion.css",
	"viewScript": ["simple-accordion"]
}