/* ======================================================
    <!-- Circle Layout -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

@mixin circle-layout( $radius, $radius2, $dot-radius, $num, $js ) {
	$deg: calc(360deg / $num);
	ul {
		box-sizing: border-box;
		position: relative;
		width: $radius * 2;
		height: $radius * 2;
		border: 1px solid #ccc;
		border-radius: 50%;
		margin: 0;
		padding: 0;
		display: inline-block;

		& ~ div {
			display: block;
			position: absolute;
			z-index: 1;
			width: $radius2 * 2;
			height: $radius2 * 2;
			border-radius: 50%;
			background: var(--uix-highlight-color1);
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%) rotate(0) !important; /* Prevent scripts from modifying values */

			> div {
				padding: 2.5rem;
				overflow: hidden;
				height: calc(100% - 5rem);
				width: calc(100% - 2.5rem);
				margin-top: 2.5rem;
				position: relative;

				p {
					display: block;
					position: absolute;
					transform: translateY(-50%);
					top: 50%;
					width: calc(100% - 2.5rem);
					text-align: center;

				}
			}
		}
	}

	li {
		transition: all 0.1s ease;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		position: absolute;
		width: $dot-radius * 2;
		height: $dot-radius * 2;
		top: 0;
		left: 50%;
		margin: #{ -$dot-radius } 0 0 #{ -$dot-radius };
		transform-origin: $dot-radius #{ $radius + $dot-radius };
		border-radius: 50%;
		border: 1px solid gray;
		list-style: none;
		line-height: $dot-radius * 2;
		background-color: #fff;
		z-index: 2;

		& > a {
			display: block;
			width: 100%;
			height:100%;
			text-align: center;
		}
	}

	/* Without JavaScript */
	@if ( $js != true ) {

		@for $i from 1 through $num {

			li:nth-child(#{$i}) {
				transform: rotate($deg * $i);

				> a {
					transform: rotate(-$deg * $i);
				}
			}
		}
	}

}



/* Pure CSS */
.uix-circle-layout:not(.js-uix-circle-layout) {
	position: relative;

	$w: 150px;

	width: #{$w*2};

	@include circle-layout( $w, 110px, 20px, 8, false );

}

/* With Javascript, Support dynamically adding elements. */
.uix-circle-layout.js-uix-circle-layout {
	position: relative;

	$w: 150px;

	width: #{$w*2};

	@include circle-layout( $w, 110px, 20px, 8, true );


}

/* Center alignment */
.uix-t-c .uix-circle-layout {
	margin: 0 auto;
}