.c-hero-slider {
	position: relative;
	height: 100%;
}

.c-hero-slider__frame {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-gap: space(2);
	width: 100%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

	&::before {
		grid-row: 1;
		grid-column: 1;
		content: "";
		width: 1px;
		margin-left: -1px;
		float: left;
		height: 0;
		padding-top: 115.625%;
	}
}

.c-hero-slider__picture {
	grid-row: 1;
	grid-column: 1;
	opacity: 0;
	transition-property: transform, opacity, filter;
	transition-duration: 600ms;
	transition-timing-function: ease-out;
	transform: scale(1.03) translate(-1.2%, 0.6%);
	filter: blur(2px) saturate(100%);

	&.is-active {
		opacity: 1;
		transform: none;
		filter: none;
	}
}


/*
 * Controls:
 *
 * - Buttons
 * - Indicator dots
 */

.c-hero-slider__controls {
	position: absolute;
	bottom: space(-2);
	right: 0;
	width: percentage(2/5);
	filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));
}

.c-hero-slider__knobs {
	display: flex;
	width: 50%;
	margin: auto;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

	&::before {
		content: "";
		width: 1px;
		margin-left: -1px;
		float: left;
		height: 0;
		padding-top: 115.625%;
	}
}

.c-hero-slider__button {
	position: relative;
	width: 50%;
	border: none;
	background-color: palette(action, 300);
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 250ms;
	transition-timing-function: linear;

	&::before {
		content: '';
		position: absolute;
		left: 50%;
		display: block;
		background-image: url(/img/arrowhead.svg);
		width: 9px;
		height: 16px;
		background-size: cover;
		transform: translate(-50%, -50%);
	}

	&:focus,
	&:hover {
		outline: none;
		background-color: palette(action, 500);
	}

	// Overrides for previous button
	&.previous {
		&::before {
			transform: rotate(0.5turn) translate(-50%, 50%);
			left: auto;
			right: 50%;
		}
	}
}

.c-hero-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: space(2);
}