.circle {
	@include f5();
	height: $comp-size-3;
	width: $comp-size-3;
	color: var(--color);
	background-color: var(--color-bg);
	box-shadow: inset 0 0 1px $color-border;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	&.active {
		color: $color-active;
		background-color: $color-bg-active;
		box-shadow: inset 0 0 1px $color-border-active;
	}
	&.tiny {
		@include f7();
		height: $comp-size-1;
		width: $comp-size-1;
	}
	&.small {
		@include f6();
		height: $comp-size-2;
		width: $comp-size-2;
	}
	&.large {
		@include f4();
		height: $comp-size-4;
		width: $comp-size-4;
	}
}