.o-image-rack {
	@include vspacing(
		'margin-top' 1,
		'margin-bottom' 1
	);
	overflow: hidden;
}


.o-image-rack__main {
	@include contain;
	position: relative;
	margin-top: space(6) + space(2); // + offset for shadow
}


.o-image-rack__slide-area {
	position: relative;
	display: flex;
	transition: transform 450ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}


.o-image-rack__item{
	& + & {
		margin-left: space(1);
	}
}


.o-image-rack__picture{
	display: block;
}


.o-image-rack__img{
	width: auto;
	max-width: none; // reset is needed
	pointer-events: none;

	@include mq($max: 590) {
		max-height: 275px;
		max-width: 80vw;
	}
}


.o-image-rack__controls {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	margin-top: space(-6);
	width: 96px;
	filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));
}


.o-image-rack__knobs {
	display: flex;
	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%;
	}
}


.o-image-rack__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%;
		}
	}
}