.c-accordion-item {
	&[open] {
		.c-accordion-item__header {
			background-color: rgb(from var(--color-grey-light) r g b / 0.5);

			svg {
				transform: rotate(0);
			}
		}
	}

	.c-accordion-item__header {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
		background: var(--color-grey-light);
		font-weight: bold;
		color: var(--color-primary);
		transition: background-color 0.3s;

		@media (width > 768px) {
			padding: calc(var(--spacing-xs) / 1.5) var(--spacing-sm);
		}

		&:hover,
		&:focus {
			background-color: rgb(from var(--color-grey-light) r g b / 0.5);
		}

		svg {
			width: 20px;
			height: auto;
			transform: rotate(-90deg);
			transition: transform 0.3s;
		}
	}

	.c-accordion-item__text {
		color: var(--color-primary);
		padding: var(--spacing-xs);
		border: 1px solid var(--color-grey-light);

		@media (width > 768px) {
			padding: var(--spacing-sm);
		}

		&.c-accordion-item__text--background-grey {
			background-color: rgb(from var(--color-grey-light) r g b / 0.5);
		}

		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}
}