.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;
	}
	&.small {
		@include f6();
		height: $comp-size-2;
		width: $comp-size-2;
	}
	&.large {
		@include f4();
		height: $comp-size-4;
		width: $comp-size-4;
	}
}

// .clearfix {
// 	@include clearfix;
// }
// .singleline {
// 	@include singleline(100%);
// }
// .help {
// 	border-bottom: dashed 1px $color-border;
// 	cursor: help;
// }
// [disabled],
// .disabled {
// 	pointer-events: none;
// }
// .object-cover {
// 	object-fit: cover;
// }
// .object-contain {
// 	object-fit: contain;
// }

// #body {
// 	.form-size-1 {
// 		height: #{$form-size-1};
// 	}
// 	.form-size-2 {
// 		height: #{$form-size-2};
// 	}
// 	.form-size-3 {
// 		height: #{$form-size-3};
// 	}

// 	.dot {
// 		@include f5();
// 		display: flex;
// 		align-items: center;
// 		gap: $gxs;
// 		width: auto;
// 		&:before {
// 			content: '';
// 			height: $font-size-5;
// 			width: $font-size-5;
// 			display: inline-block;
// 			border-radius: $font-size-5;
// 			margin-right: $gxs;
// 			flex-shrink: 0;
// 			color: var(--color);
// 			background-color: var(--color-bg);
// 		}
// 	}

// 	.corner {
// 		border-radius: $border-radius;
// 	}
// 	.corner-1 {
// 		border-radius: #{$form-size-1};
// 	}
// 	.corner-2 {
// 		border-radius: #{$form-size-2};
// 	}
// 	.corner-3 {
// 		border-radius: #{$form-size-3};
// 	}
// 	.sticky-bottom {
// 		position: sticky;
// 		top: initial;
// 		left: 0;
// 		right: 0;
// 		bottom: 0;
// 		z-index: $ui-stick-index;
// 	}
// 	.sticky-top {
// 		position: sticky;
// 		top: 0;
// 		left: 0;
// 		right: 0;
// 		bottom: initial;
// 		z-index: $ui-stick-index;
// 	}
// 	.sticky-left {
// 		position: sticky;
// 		top: 0;
// 		left: 0;
// 		right: initial;
// 		bottom: 0;
// 		z-index: $ui-stick-index;
// 	}
// 	.sticky-right {
// 		position: sticky;
// 		top: 0;
// 		left: initial;
// 		right: 0;
// 		bottom: 0;
// 		z-index: $ui-stick-index;
// 	}

// 	.absolute-bottom {
// 		position: absolute;
// 		top: initial;
// 		left: 0;
// 		right: 0;
// 		bottom: 0;
// 	}
// 	.absolute-top {
// 		position: absolute;
// 		top: 0;
// 		left: 0;
// 		right: 0;
// 		bottom: initial;
// 	}
// 	.absolute-left {
// 		position: absolute;
// 		top: 0;
// 		left: 0;
// 		right: initial;
// 		bottom: 0;
// 	}
// 	.absolute-right {
// 		position: absolute;
// 		top: 0;
// 		left: initial;
// 		right: 0;
// 		bottom: 0;
// 	}
// 	.lh-small {
// 		line-height: $line-height-1;
// 	}
// 	.lh-normal {
// 		line-height: $line-height-2;
// 	}
// 	.lh-large {
// 		line-height: $line-height-3;
// 	}
// 	.hide {
// 		display: none;
// 	}
// 	.float-left {
// 		float: left;
// 	}

// 	.float-right {
// 		float: right;
// 	}
// 	.blur {
// 		filter: blur(10px);
// 	}
// 	.img-bg {
// 		position: relative;
// 		> img {
// 			background: absolute;
// 			left: 0;
// 			top: 0;
// 			width: 100%;
// 			height: 100%;
// 			object-fit: cover;
// 			z-index: 1;
// 		}
// 	}
// 	.img-small {
// 		height: $font-size-5;
// 		padding: 2px;
// 		object-fit: cover;
// 		width: auto;
// 	}
// 	.scale-120 {
// 		transform: scale(1.5);
// 		transform-origin: center center;
// 	}
// 	.scale-150 {
// 		transform: scale(1.5);
// 		transform-origin: center center;
// 	}
// 	.b-b-1 {
// 		border-bottom: 1px solid $color-border;
// 	}
// 	.b-t-1 {
// 		border-top: 1px solid $color-border;
// 	}
// 	.b-l-1 {
// 		border-left: 1px solid $color-border;
// 	}
// 	.b-r-1 {
// 		border-right: 1px solid $color-border;
// 	}
// }

// @include order();