Menu Button

.pds-nav-accordion__toggle {
	align-items: center;
	background-color: var(--pds-color-surface-default);
	border: none;
	color: var(--pds-color-foreground-default);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	min-height: var(--pds-spacing-4xl);
	padding-inline: var(--pds-spacing-m);
	width: 100%;

	& > * {
		pointer-events: none;
	}

	&:focus {
		outline: none;
	}

	&:focus-visible {
		outline: var(--pds-border-width-outline) solid
			var(--pds-color-interactive-focus);
		outline-offset: var(--pds-spacing-3xs);
	}
}

.pds-nav-accordion__toggle-icon {
	color: var(--pds-color-foreground-default-secondary);
	flex-shrink: 0;
	margin-inline-end: var(--pds-spacing-3xs);
	transition: var(--pds-animation-transition-button);
}

.pds-nav-accordion__toggle--expanded .pds-nav-accordion__toggle-icon {
	transform: rotate(180deg);
	transition: var(--pds-animation-transition-rotation);
}

.pds-nav-accordion__content {
	display: none;
}

.pds-nav-accordion__content--expanded {
	display: block;
}