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

.trigger-nav {
	display: flex;
	align-items: center;
	gap: var(--padding-extra-small);
	transition: var(--transition-fast);
	cursor: pointer;

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

	color: var(--action);

	&-prev {
		&::before {
			content: '\e903'; // icon-arrow-back
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-family: brandui-icons;
			font-size: 1.5rem;
			font-weight: 500;
			width: var(--padding-extra-large);
			height: var(--padding-extra-large);
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: var(--radius-medium);
			transition:
				color var(--transition-fast),
				background-color var(--transition-fast),
				border-color var(--transition-fast);
			background-color: with-opacity(var(--action), 5);
			border-color: with-opacity(var(--action), 50);
		}
	}

	&-next {
		&::after {
			content: '\e905'; // icon-arrow-forward
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-family: brandui-icons;
			font-size: 1.5rem;
			font-weight: 500;
			width: var(--padding-extra-large);
			height: var(--padding-extra-large);
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: var(--radius-medium);
			transition:
				color var(--transition-fast),
				background-color var(--transition-fast),
				border-color var(--transition-fast);
			background-color: with-opacity(var(--action), 5);
			border-color: with-opacity(var(--action), 50);
		}
	}

	&:hover,
	&:focus-within,
	&.open {
		&::before {
			color: var(--action-contrast);
			background-color: var(--action);
		}

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