side-navigation.css

@import '../base/media-queries.css';
@import '../base/variables.css';

.main {
	@media (--mq-up-to-medium) {
		display: none;
	}

	@media (--mq-from-medium) {
		left: 0;
		position: absolute;
		top: 0;
		z-index: 3;
	}

	@media (--mq-from-wide) {
		margin-bottom: 10rem;
	}

	@supports (position: sticky) {
		@media (--mq-from-medium) {
			display: block;
			float: left;
			left: auto;
			margin-bottom: 5rem;
			overflow: visible;
			position: sticky;
			top: 160px;
			width: 0;
		}
	}

	&.mobile {
		display: block;

		@media (--mq-from-medium) {
			display: none;
		}
	}
}

.list {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0 3.75% 2rem;

	@media (--mq-from-small) and (--mq-up-to-medium) {
		margin: 0 auto;
		padding-left: 0;
		padding-right: 0;
		width: 66.6666%;
	}

	@media (--mq-from-medium) {
		left: 0;
		padding: 0 0 0 3vw;
		position: absolute;
		top: -0.5rem;
		width: calc(13.6666vw);
	}

	@media (--mq-from-wide) {
		width: max-content
	}

	@media (min-width: 1676px) {
		padding-left: calc((100vw - 1582px) / 2);
	}
}

.link {
	color: var(--color-blue);
	display: block;
	font-family: var(--font-serif);
	font-weight: 500;
	text-decoration: none;

	@media (--mq-up-to-medium) {
		border-bottom: 1px solid rgba(27, 91, 154, 0.25);
		box-sizing: border-box;
		font-size: 0.9375rem;
		line-height: 2.5rem;
		padding: 0.25rem 0;
		position: relative;
	}

	@media (--mq-from-medium) {
		display: inline-block;
		font-size: 1rem;
		padding-bottom: 0.375rem;
		padding-top: 0.375rem;
		width: 100%;
	}

	@media (--mq-from-wide) {
		font-size: 1.125rem;
		width: max-content;
	}

	.item:first-child & {
		@media (--mq-up-to-medium) {
			border-top: 1px solid rgba(27, 91, 154, 0.25);
		}
	}

	&:after {
		@media (--mq-up-to-medium) {
			content: '›';
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&:hover,
	&.linkActive {
		color: var(--color-purple);

		.t-jac & {
			color: var(--color-orange);
		}
	}
}