// Component settings: Slide indicator
// ------------------------------------------

$c-slide-indicator: (
	'color-dot':			palette(secondary, 500),
	'color-dot-active':		palette(action, 500),
	'color-ring-active':	palette(action, 500),
	'color-dots-background':palette(action, 500),
	'size-dot':				8px,
	'size-dot-active':		4px,
	'size-ring-active':		10px,
	'size-targetbox':		20px,
);

// ------------------------------------------


.c-slide-indicator {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.c-slide-indicator__button {
	position: relative;
	display: inline-block;
	width: map-get($c-slide-indicator, 'size-targetbox');
	height: map-get($c-slide-indicator, 'size-targetbox');
	background-color: transparent;
	border: none;
	cursor: pointer;
	transition-property: background-color, opacity;
	transition-duration: 250ms;

	&:focus {
		outline: none;
	}

	&:hover:not(.is-active),
	&:focus:not(.is-active) {
		opacity: 0.5;
	}

	&:before,
	&:after {
		content: '';
		position: absolute;
		background-clip: content-box;
		transition-property: transform, background-color, opacity;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		border-radius: 100%;
	}

	&:before {
		$offset: calc((#{map-get($c-slide-indicator, 'size-targetbox')} - #{map-get($c-slide-indicator, 'size-dot')}) / 2);
		top: $offset;
		right: $offset;
		bottom: $offset;
		left: $offset;
		background-color: map-get($c-slide-indicator, 'color-dot');
	}

	&:after {
		$offset: calc((#{map-get($c-slide-indicator, 'size-targetbox')} - #{map-get($c-slide-indicator, 'size-ring-active')}) / 2);
		top: $offset;
		right: $offset;
		bottom: $offset;
		left: $offset;
		border: 1px solid map-get($c-slide-indicator, 'color-ring-active');
		transform: scale(1.4);
		opacity: 0;
	}

	&.is-active {
		&:before {
			background-color: map-get($c-slide-indicator, 'color-dot-active');
			border-color: rgba(map-get($c-slide-indicator, 'color-ring-active'), 0.9);
			transform: scale(strip-unit(map-get($c-slide-indicator, 'size-dot-active')) / strip-unit(map-get($c-slide-indicator, 'size-dot')));
		}
		&:after {
			opacity: 0.9;
			transform: scale(1);
		}
	}
}