$sectionNav__fullBreakpoint: 40rem;

.sectionNav {
	padding: $spacing-lg 0 0;
	margin-bottom: $spacing-3xl;
	@include line-height('normal');

	a,
	summary {
		&:focus-visible {
			outline: none;
			box-shadow: inset 0 0 0 0.2rem $secondary;
		}
	}

	&__title {
		@include typescale('xs');
		color: $grey;
		margin: 0 0 $spacing-lg;
	}

	&__list {
		max-width: none;
		column-gap: $grid-gutter;

		@media (min-width: $wrap-large-gutter-width) {
			columns: 15em;
		}

		@media (min-width: 75em) {
			columns: 20em;
		}

		li {
			display: inline-table; // counteracts overflowing columns
			margin: 0;
			break-inside: avoid-column;
			box-sizing: border-box;
			width: 100%;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(90deg,
				rgba($grey--light, 1) 80%,
				rgba($grey--light, 0) 100%,
			) 1; // NB: the '1' here is not a typo, it is critical for border-slice!
		}

		a {
			display: flex;
			color: $grey--dark;
			padding: $spacing-xs $spacing-sm $spacing-xs 0;
			text-decoration: none;

			&:hover, &:focus {
				text-decoration: underline;
			}

			&::before {
				content: '';
				flex: 0 0 1.2em;
				display: inline-block;
				vertical-align: middle;
				width: 1.2em;
				height: 1em;
				background: center center / contain no-repeat url('#{$assets-directory}/img/rarr-secondary.svg');
				margin-top: 0.25em;
				margin-inline-end: 0.75em;
				transition: transform 150ms ease-in-out;
			}

			&:hover, &:focus {
				&::before {
					transform: translateX(0.2em);
				}
			}
		}
	}

	.current_page_item {
		font-weight: bold;
	}

	&__toggle {
		position: relative;
		cursor: pointer;
		margin: 0 0 $spacing-lg;
		padding: $spacing-sm $spacing-xl $spacing-sm 0;
		color: $primary;
		text-transform: uppercase;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: $spacing-sm;
			bottom: 0;
			width: $spacing-md;
			background: center center / contain no-repeat url('#{$assets-directory}/img/gt-secondary.svg');
			transform: rotate(90deg);
			transition: transform 200ms ease-in-out;
		}

		&::marker,
		&::-webkit-details-marker {
			content: '';
			display: none;
		}

		@media (min-width: $sectionNav__fullBreakpoint) {
			@include typescale('xs');
			text-transform: none;
			color: $grey;
			background: none;
			padding: 0;
			list-style: none;
		}
	}

	details[open] {
		.sectionNav__toggle {
			&::after {
				transform: rotate(-90deg);

				@media (min-width: $sectionNav__fullBreakpoint) {
					display: none;
				}
			}
		}
	}

	&__list.is-style-arrow-bullet-columns {
		margin-bottom: 0;
	}
}