.block-accordion-item {
	$this: &;

	--accordion-item-icon-size: 1.5rem;

	background-color: var(--accordion-item-background-color, var(--global-colors-white));
	color: var(--accordion-item-color, var(--global-colors-black));

	border-bottom: 2px solid var(--global-colors-black);

	transition: {
		property: background-color;
		timing-function: ease-out;
		duration: 0.3s;
	}

	&__panel {
		display: block;
		max-height: 0;
		overflow: hidden;

		transition: {
			property: max-height;
			timing-function: var(--ease-out-back);
			duration: 0.3s;
		}
	}

	&:hover {
		--accordion-item-background-color: var(--global-colors-primary300);
	}

	&__trigger {
		@extend %button-reset;

		background: none;

		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		padding: 1.5rem 1.5rem 1.5rem 0;

		cursor: pointer;

		transition: {
			property: outline;
			timing-function: ease-out;
			duration: 0.3s;
		}

		@supports selector(:focus-visible) {
			&:focus {
				outline: none;
			}

			&:focus-visible {
				--accordion-item-background-color: var(--global-colors-primary300);

				outline: 4px solid var(--global-colors-primary300);
			}
		}

		@supports not selector(:focus-visible) {
			&:focus {
				--accordion-item-background-color: var(--global-colors-primary300);

				outline: 4px solid var(--global-colors-primary300);
			}
		}
	}

	&__icon {
		height: var(--accordion-item-icon-size);
		width: var(--accordion-item-icon-size);

		transform: var(--accordion-item-trigger-icon-rotation, rotate(0));
		pointer-events: none;

		transition: {
			property: transform;
			timing-function: var(--ease-out-back);
			duration: 0.3s;
		}

		svg {
			height: var(--accordion-item-icon-size);
			width: var(--accordion-item-icon-size);
		}
	}

	&__content {
		padding: 2rem 0;
	}

	&[data-open='true'] {
		// Half turn for effect + 45deg to make it an X.
		--accordion-item-trigger-icon-rotation: rotate(135deg);

		> #{$this}__panel {
			max-height: var(--max-height, 100%);
		}
	}
}