$c-slider-ornament-size:	68px;
$c-slider-control-height: 	49px;
$c-slider-button-arrow-width: 14px;

@mixin point($direction: right) {
	position: absolute;
	top: 0;
	bottom: 0;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border: halve($c-slider-control-height) solid transparent;
	background-color: transparent;
	transition-property: border;
	transition-duration: 250ms;
	transition-timing-function: linear;

	@if($direction == right) {
		right: -#{$c-slider-button-arrow-width};
		border-left: $c-slider-button-arrow-width solid palette(action, 300);
		border-right-width: 0;
	}
	@if($direction == left) {
		left: -#{$c-slider-button-arrow-width};
		border-right: $c-slider-button-arrow-width solid palette(action, 300);
		border-left-width: 0;
	}
}


.c-slider {}

.c-slider__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));

	&::after {
		@include ornament-hex-filled(topright, $c-slider-ornament-size);
		content: '';
		display: block;
		z-index: -1;
		filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.5));
	}
}

.c-slider__picture {
	width: 100%;
	height: 0;
	padding-bottom: 67.3076923%;
	overflow: hidden;
}

.c-slider__dots {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.c-slider__controls {
	position: absolute;
	bottom: halve(-$c-slider-control-height);
	right: 0;
	display: flex;
}

.c-slider__button {
	position: relative;
	height: $c-slider-control-height;
	border: none;
	background-color: palette(action, 300);
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 250ms;
	transition-timing-function: linear;

	&::before {
		content: '';
		display: block;
		background-image: url(/img/arrowhead.svg);
		width: 9px;
		height: 16px;
		background-size: cover;
	}

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

}
.c-slider__button--prev {
	padding-left: space(4);
	padding-right: space(2);

	&::before {
		transform: rotate(0.5turn);
	}
	&::after {
		@include point(left);
	}
	&:focus,
	&:hover {
		&::after {
			border-right-color: palette(action, 500);
		}
	}
}
.c-slider__button--next {
	padding-left: space(2);
	padding-right: space(4);

	&::after {
		@include point(right);
	}
	&:focus,
	&:hover {
		&::after {
			border-left-color: palette(action, 500);
		}
	}
}

.c-slider__caption {
	margin-top: space(5);
	color: palette(action, 300);
}