@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

.accordion {
	&-label {
		padding: var(--padding-small);
		border-radius: var(--radius-small);
		display: flex;
		align-items: center;
		gap: var(--padding-extra-small);
		cursor: pointer;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast);

		@include font.get-typography(body-bold);

		color: var(--ui-headline);

		& * {
			transition: var(--transition-fast);
		}

		&:not(.slim) {
			&:hover {
				background-color: with-opacity(var(--action), 10);
			}
		}

		&::before {
			content: '\e901'; // icon-add
			font-family: brandui-icons;
			font-weight: 500;
			color: var(--action);
		}

		&.slim {
			padding: 0;

			&:hover {
				color: var(--action);
			}
		}
	}

	&-content {
		display: none;
		padding: var(--padding-small);

		&.open {
			display: block;
		}
	}

	&-link-list {
		padding-left: var(--padding-medium);
		display: flex;
		flex-direction: column;
		gap: var(--padding-small);
		list-style: none;
	}

	&-link {
		text-decoration: none;

		@include font.get-typography(body-bold);

		color: var(--ui-body);

		&:hover {
			color: var(--action);
		}

		&.active {
			color: var(--action);
		}
	}

	&.open {
		.accordion-label {
			&:not(.slim) {
				background-color: with-opacity(var(--action), 10);
			}

			&.slim {
				color: var(--action);
			}

			&::before {
				content: '\e934'; // icon-remove
			}
		}

		.accordion-content {
			display: block;
		}
	}
}