// =============================================================================
// :: Settings
// =============================================================================
$circles-width: 113rem;
$circles-height: 108rem;

// =============================================================================
// :: Circles
// =============================================================================
.c-circles {
	position: relative;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-circles__holder-right {
	position: fixed;
	left: 25rem;
	bottom: 55rem;
	z-index: $z-index-pit;

	.c-circle__item {
		width: 75rem;
		height: 75rem;
	}

	@include respond-at(get-breakpoint("desktop")) {
		position: fixed;
		top: 10rem;
		left: auto;
		bottom: auto;
		right: 20%;

		.c-circle__item {
			width: 113rem;
			height: 108rem;
		}
	}
}

.c-circle__item {
	position: absolute;
	top: 0;
	left: 0;

	width: $circles-width;
	height: $circles-height;

	transform-origin: center;

	svg {
		width: 100%;
		height: 100%;
	}
}

.c-circle__shape {
	fill: $background-color-base;
	fill-rule: evenodd;
	clip-rule: evenodd;
}

.c-circle__path {
	fill: none;
	stroke: $border-color-light;

	stroke-width: $border-width-base;
}

.c-circle__item-1,
.c-circle__item-4 {
	opacity: 0.5;

	animation: clockwise 30s linear infinite;
	animation-delay: 0.2s;
}

.c-circle__item-2,
.c-circle__item-6 {
	animation: counter-clockwise 30s linear infinite;
	animation-delay: 0.4s;

	.c-circle__path {
		stroke-width: $border-width-1x-small;
	}
}

.c-circle__item-3,
.c-circle__item-5 {
	opacity: 0.2;

	animation: clockwise 30s linear infinite;
	animation-delay: 0.6s;

	.c-circle__path {
		stroke-width: $border-width-2x-small;
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-circle--color-primary {

	.c-circle__shape {
		stroke: $primary-color;

		fill: $primary-color;
	}

	.c-circle__path {
		stroke: $primary-color;
	}
}

.c-circle--color-secondary {

	.c-circle__shape {
		stroke: $secondary-color-green;

		fill: $secondary-color-green;
	}

	.c-circle__path {
		stroke: $secondary-color-green;
	}
}

.c-circle--fat {

	.c-circle__shape {
		opacity: 0;
	}

	.c-circle__path {
		opacity: 0.1;

		stroke-width: $border-width-2x-large;
	}
}

// =============================================================================
// :: Animations
// =============================================================================
@keyframes clockwise {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes counter-clockwise {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}