Sticky List

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-sticky-list {
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);

	&__content {
		position: relative;
		top: auto;

		@include bp($lg) {
			position: sticky;
			top: rem-calc(200);
		}
	}

	&__copy {
		margin-top: rem-calc(24);
	}

	&__list {
		margin-top: rem-calc(20);

		@include bp($lg) {
			margin-top: rem-calc(-22);
		}
	}

	&__list-link {
		display: block;
		border-bottom: 1px solid $lightBlue;
		padding: rem-calc(22 0);
		text-decoration: none;
		color: $darkBlue;
		@include fluid-type(18, 20);
		transition: all 0.3s ease-out;
		position: relative;

		@include bp($lg) {
			padding: rem-calc(35 0);
		}

		&:last-of-type {
			border-bottom: none;
		}

		&:after {
			content: '';
			position: absolute;
			top: rem-calc(19);
			right: 0;
			width: rem-calc(32);
			height: rem-calc(32);
			border-radius: 50%;
			border: 1px solid $darkBlue;
			background-image: url('#{$asset-path}/icons/icon-full-arrow-right-navy.svg');
			background-repeat: no-repeat;
			background-position: center;
			transition: all 0.3s ease-out;

			@include bp($lg) {
				top: rem-calc(35);
			}
		}

		&:hover {
			font-weight: 700;
			border-bottom: 2px solid $darkBlue;

			&:after {
				background-color: $darkBlue;
				background-image: url('#{$asset-path}/icons/icon-full-arrow-right-white.svg');
			}
		}
	}
}