.c-ring {

}


.c-ring__body {
	position: relative;
	border-radius: 50%;
	background-image: linear-gradient(to bottom, palette(primary, 500), palette(primary, 600));
	color: palette(neutral, 0);
	width: space(4);
	height: space(4);
	margin: space(2);
	display: flex;
	align-items: center;
	justify-content: center;

	&::before,
	&::after {
	    content: '';
	    position: absolute;
	    z-index: 0;
	    top: space(-1);
	    bottom: space(-1);
	    right: space(-1);
	    left: space(-1);
		border: 1px solid palette(neutral, 100);
		border-radius: 50%;
	}

	&::after {
		top: space(-2);
		bottom: space(-2);
		right: space(-2);
		left: space(-2);
		opacity: 0.5;
	}
}


.c-ring--on-light {
	.c-ring__body {
		&::before,
		&::after {
			border: 1px solid palette(primary, 500);
		}
	}
}


.c-ring--simple {
	.c-ring__body {
		margin: 0;

		&::before,
		&::after {
			display: none;
		}
	}
}