/*! Mozilla Public License, v. 2.0, http://mozilla.org/MPL/2.0/. */
/* This file is radialMenu.css version 1.0
	© Fabio Vitali, fabio.vitali@unibo.it, October 2020. 

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  
  	:root {  
		--radius: 4em; 
		--radial-delay: 0.1s;
		--radial-speed: 0.1s;
		
		--icon-size: 25px;
		--font-size: 1;
		--background-color: transparent; 
		--color: black;

		--ml: calc( var(--radius) / 2 + 1rem);
		--mr: calc(var(--radius) / 2 + 1rem);
	}
	
	/* Radial menu as a whole */ 
	
	.radial {
		display: inline-block;
		position: relative; 
		vertical-align: middle; 
		/* 		width: var(--icon-size) !important ;   */
		height: var(--icon-size) !important ;
	}

	/* Central element (pivot) */ 
	
	.radialPivot {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative; 
		z-index: 10; 
		left: 0px; 
		top: 0px; 
		margin-left: 0px;
		margin-right: 0px;
		width: var(--icon-size) !important ;
		height: var(--icon-size) !important ;
		
		transition: all var(--radial-speed) ease-in;
	}

	.radialPivot {
		line-height: calc( var(--icon-size) * var(--font-size) )  !important ;
		background-color: var(--background-color); 
		color: var(--color);
	}

	.radialPivot > * {
		font-size: calc( var(--icon-size) * var(--font-size) * 1) !important ;
	}
	
	label.radialPivot {
		cursor: pointer;	
	}
	
	.radial.list.clear .radialPivot , 
	.radial.menu.clear  input[type=checkbox]:checked ~ .radialPivot  {
		margin-left: var(--ml);
		margin-right: var(--mr);
	}
	.radial.list.clearLeft .radialPivot , 
	.radial.menu.clearLeft  input[type=checkbox]:checked ~ .radialPivot  {
		margin-left: var(--ml);
	}
	.radial.list.clearRight .radialPivot , 
	.radial.menu.clearRight  input[type=checkbox]:checked ~ .radialPivot  {
		margin-right: var(--mr);
	}


	.radial input[type=checkbox] {
		display: inline-block;
		position: absolute; 
		top: 0px;
		left: 0px; 
		z-index: 9; 
		width: 1px !important ;
		height: 1px !important ;
		opacity: 0; 
	}

	/* Container, i.e. radial list */ 

	.radialList {
		display: inline-block;
		position: relative;
		width: var(--icon-size) !important ;
		height: var(--icon-size) !important ;
 		z-index: 8; 
		padding: 0px;
		visibility: hidden;
		list-style-type: none;
		margin-top: 0px;
		margin-bottom: 0px; 
		margin-left: 0px;
		margin-right: 0px;
		transition: all var(--radial-speed) ease-in;
		--center: calc(0.5 * var(--icon-size) - 1px);
		left: 0px;
		top: calc(-2 * var(--center) ); /* 2px are to consider the border of the pivot */
	}

	.radial.list .radialList , 
	 input[type=checkbox]:checked ~ .radialList  {
	}
	.radial.list.clear .radialList , 
	.radial.menu.clear  input[type=checkbox]:checked ~ .radialList  {
		margin-left: var(--ml);
		margin-right: var(--mr);
	}
	.radial.list.clearLeft .radialList , 
	.radial.menu.clearLeft  input[type=checkbox]:checked ~ .radialList  {
		margin-left: var(--ml);
	}
	.radial.list.clearRight .radialList , 
	.radial.menu.clearRight  input[type=checkbox]:checked ~ .radialList  {
		margin-right: var(--mr);
	}

	/* Individual items of radial list */ 

	.radialList > * {
		display: inline-block;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;	
		top: 0px ;
		left: 0px;
		width: var(--icon-size) ;
		height: var(--icon-size) ;
		margin: 0px;
		padding: 0px;
		visibility: hidden;
		transition: all var(--radial-speed) ease-in;
		z-index: 12; 
	}

	.radial.list .radialList > *, 
	 input[type=checkbox]:checked ~ .radialList > * {
		font-size: calc( var(--icon-size) * var(--font-size) * 0.66) !important ;
		line-height: calc( var(--icon-size) * var(--font-size) ) !important; 
		background-color: var(--background-color); 
		color: var(--color);

		left: calc( var(--radius) * var(--left)  + (var(--center) - var(--icon-size) / 2));
		top:  calc( var(--radius) * var(--top)   + (var(--center) - var(--icon-size) / 2));		
/* 
		top: calc( var(--radius) * var(--top) ) ;
		left: calc( var(--radius) * var(--left) ) ;
 */
		opacity: 1; 
		visibility: visible;
	}

	 input[type=checkbox]:checked ~ .radialList > * {
		-webkit-transition-delay: calc(var(--radial-delay) * var(--delay));
		-moz-transition-delay: calc(var(--radial-delay) * var(--delay));
		transition-delay: calc(var(--radial-delay) * var(--delay));
	}
	
	/* displace labels around item icons */ 
	
	.displace {
		position: absolute;
		width: calc( var(--radius) * 1);
		top: calc(0.25rem + var(--radius) * var(--top));
		left: calc( var(--radius) * var(--left));
		white-space: nowrap;
		display:flex;
		font-size: calc( var(--icon-size) * var(--font-size) * 0.66) !important ;
		line-height: calc( var(--icon-size) * var(--font-size) ) !important; 
		background-color: transparent; 
		color: black;
		border-radius: none; 
	}
	
	.icon {
		border-radius: 50%; 
	}
	.border {
		border: solid var(--color ) 1px; 
	}
	.radial a {
		text-decoration: none;
		color: inherit; 
	} 

	.icon:hover {
		filter: invert(20%) ;
	}

	.icon:active {
		filter: contrast(0) ;
	}

	.sronly {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}

	  
	.clock > *:nth-of-type(1) { --top: -1.000;   --left:  0.000; --delay: 0; }
	.clock > *:nth-of-type(2) { --top: -0.866;   --left:  0.500; --delay: 1; }
	.clock > *:nth-of-type(3) { --top: -0.500;   --left:  0.866; --delay: 2; }
	.clock > *:nth-of-type(4) { --top:  0.000;   --left:  1.000; --delay: 3; }
	.clock > *:nth-of-type(5) { --top:  0.500;   --left:  0.866; --delay: 4; }
	.clock > *:nth-of-type(6) { --top:  0.866;   --left:  0.500; --delay: 5; }
	.clock > *:nth-of-type(7) { --top:  1.000;   --left:  0.000; --delay: 6; }
	.clock > *:nth-of-type(8) { --top:  0.866;   --left: -0.500; --delay: 7; }
	.clock > *:nth-of-type(9) { --top:  0.500;   --left: -0.866; --delay: 8; }
	.clock > *:nth-of-type(10) { --top:  0.000;   --left: -1.000; --delay: 9; }
	.clock > *:nth-of-type(11) { --top: -0.500;   --left: -0.866; --delay: 10; }
	.clock > *:nth-of-type(12) { --top: -0.866;   --left: -0.500; --delay: 11; }

	.p0, .clock0  { --top: -1.000 !important ;   --left:  0.000 !important ; }
	.p1, .clock1  { --top: -0.866 !important ;   --left:  0.500 !important ; }
	.p2, .clock2  { --top: -0.500 !important ;   --left:  0.866 !important ; }
	.p3, .clock3  { --top:  0.000 !important ;   --left:  1.000 !important ; }
	.p4, .clock4  { --top:  0.500 !important ;   --left:  0.866 !important ; }
	.p5, .clock5  { --top:  0.866 !important ;   --left:  0.500 !important ; }
	.p6, .clock6  { --top:  1.000 !important ;   --left:  0.000 !important ; }
	.p7, .clock7  { --top:  0.866 !important ;   --left: -0.500 !important ; }
	.p8, .clock8  { --top:  0.500 !important ;   --left: -0.866 !important ; }
	.p9, .clock9  { --top:  0.000 !important ;   --left: -1.000 !important ; }
	.p10, .clock10 { --top: -0.500 !important ;   --left: -0.866 !important ; }
	.p11, .clock11 { --top: -0.866 !important ;   --left: -0.500 !important ; }
	.p12, .clock12 { --top: -1.000 !important ;   --left:  0.000 !important ; }

	.compass > *:nth-of-type(1)  { --top: -1.000 ;   --left:  0.000 ; --delay: 0; } 
	.compass > *:nth-of-type(2)  { --top: -0.924 ;   --left:  0.383 ; --delay: 1; }
	.compass > *:nth-of-type(3)  { --top: -0.707 ;   --left:  0.707 ; --delay: 2; }
	.compass > *:nth-of-type(4)  { --top: -0.383 ;   --left:  0.924 ; --delay: 3; }
	.compass > *:nth-of-type(5)  { --top:  0.000 ;   --left:  1.000 ; --delay: 4; }
	.compass > *:nth-of-type(6)  { --top:  0.383 ;   --left:  0.924 ; --delay: 5; }
	.compass > *:nth-of-type(7)  { --top:  0.707 ;   --left:  0.707 ; --delay: 6; }
	.compass > *:nth-of-type(8)  { --top:  0.924 ;   --left:  0.383 ; --delay: 7; }
	.compass > *:nth-of-type(9)  { --top:  1.000 ;   --left:  0.000 ; --delay: 8; }
	.compass > *:nth-of-type(10) { --top:  0.924 ;   --left: -0.383 ; --delay: 9; }
	.compass > *:nth-of-type(11) { --top:  0.707 ;   --left: -0.707 ; --delay: 10; }
	.compass > *:nth-of-type(12) { --top:  0.383 ;   --left: -0.924 ; --delay: 11; }
	.compass > *:nth-of-type(13) { --top:  0.000 ;   --left: -1.000 ; --delay: 12; }
	.compass > *:nth-of-type(14) { --top: -0.383 ;   --left: -0.924 ; --delay: 13; }
	.compass > *:nth-of-type(15) { --top: -0.707 ;   --left: -0.707 ; --delay: 14; }
	.compass > *:nth-of-type(16) { --top: -0.924 ;   --left: -0.383 ; --delay: 15; }


	.pN,   .compass0, .compass16	{ --top: -1.000 !important ;   --left:  0.000 !important ; } 
	.pNNE, .compass1  { --top: -0.924 !important ;   --left:  0.383 !important ; }
	.pNE,  .compass2  { --top: -0.707 !important ;   --left:  0.707 !important ; }
	.pENE, .compass3  { --top: -0.383 !important ;   --left:  0.924 !important ; }
	.pE,   .compass4  { --top:  0.000 !important ;   --left:  1.000 !important ; }
	.pESE, .compass5  { --top:  0.383 !important ;   --left:  0.924 !important ; }
	.pSE,  .compass6  { --top:  0.707 !important ;   --left:  0.707 !important ; }
	.pSSE, .compass7  { --top:  0.924 !important ;   --left:  0.383 !important ; }
	.pS,   .compass8  { --top:  1.000 !important ;   --left:  0.000 !important ; }
	.pSSW, .compass9  { --top:  0.924 !important ;   --left: -0.383 !important ; }
	.pSW,  .compass10 { --top:  0.707 !important ;   --left: -0.707 !important ; }
	.pWSW, .compass11 { --top:  0.383 !important ;   --left: -0.924 !important ; }
	.pW,   .compass12 { --top:  0.000 !important ;   --left: -1.000 !important ; }
	.pWNW, .compass13 { --top: -0.383 !important ;   --left: -0.924 !important ; }
	.pNW,  .compass14 { --top: -0.707 !important ;   --left: -0.707 !important ; }
	.pNNW, .compass15 { --top: -0.924 !important ;   --left: -0.383 !important ; }

	
	.size0 { --icon-size: 0.75rem !important; }
	.size1 { --icon-size: 1.00rem !important; }
	.size2 { --icon-size: 1.25rem !important; }
	.size3 { --icon-size: 1.50rem !important; }
	.size4 { --icon-size: 1.75rem !important; }
	.size5 { --icon-size: 2.00rem !important; }
	.size6 { --icon-size: 2.25rem !important; }
	.size7 { --icon-size: 2.50rem !important; }
	.size8 { --icon-size: 2.75rem !important; }
	.size9 { --icon-size: 3.00rem !important; }

	.radius1 { --radius: 1rem !important; }
	.radius15 { --radius: 1.5rem !important; }
	.radius2 { --radius: 2rem !important; }
	.radius3 { --radius: 3rem !important; }
	.radius4 { --radius: 4rem !important; }
	.radius5 { --radius: 5rem !important; }
	.radius6 { --radius: 6rem !important; }
	.radius7 { --radius: 7rem !important; }
	.radius8 { --radius: 8rem !important; }
	.radius9 { --radius: 9rem !important; }
	.radius10 { --radius: 10rem !important; }

	.f0 { --font-size: 0.50; } 
	.f1 { --font-size: 0.66; } 
	.f2 { --font-size: 0.75; }
	.f3 { --font-size: 1.00; }
	.f4 { --font-size: 1.25; }
	.f5 { --font-size: 1.33; }
	.f6 { --font-size: 1.50; }

	.tl { text-align: left;   justify-content: flex-start;}
	.tc { text-align: center; justify-content: center; }
	.tr { text-align: right;  justify-content: flex-end; }

	.d1  { --delay: 0 !important ; }
	.d2  { --delay: 1 !important ; }
	.d3  { --delay: 2 !important ; }
	.d4  { --delay: 3 !important ; }
	.d5  { --delay: 4 !important ; }
	.d6  { --delay: 5 !important ; }
	.d7  { --delay: 6 !important ; }
	.d8  { --delay: 7 !important ; }
	.d9  { --delay: 8 !important ; }
	.d10 { --delay: 9 !important ; }
	.d11 { --delay: 10 !important ; }
	.d12 { --delay: 11 !important ; }
	.d13 { --delay: 12 !important ; }
	.d14 { --delay: 13 !important ; }
	.d15 { --delay: 14 !important ; }
	.d16 { --delay: 15 !important ; }
	
	.delay0  { --radial-delay: 0.0s !important; }
	.delay05 { --radial-delay: 0.05s !important; }
	.delay1  { --radial-delay: 0.1s !important; }
	.delay2  { --radial-delay: 0.2s !important; }
	.delay3  { --radial-delay: 0.3s !important; }
	.delay4  { --radial-delay: 0.4s !important; }
	.delay5  { --radial-delay: 0.5s !important; }
	.delay6  { --radial-delay: 0.6s !important; }
	.delay7  { --radial-delay: 0.7s !important; }
	.delay8  { --radial-delay: 0.8s !important; }
	.delay9  { --radial-delay: 0.9s !important; }
	.delay10 { --radial-delay: 1.0s !important; }

	.speed0  { --radial-speed: 0.0s !important; }
	.speed05 { --radial-speed: 0.05s !important; }
	.speed1  { --radial-speed: 0.1s !important; }
	.speed2  { --radial-speed: 0.2s !important; }
	.speed3  { --radial-speed: 0.3s !important; }
	.speed4  { --radial-speed: 0.4s !important; }
	.speed5  { --radial-speed: 0.5s !important; }
	.speed6  { --radial-speed: 0.6s !important; }
	.speed7  { --radial-speed: 0.7s !important; }
	.speed8  { --radial-speed: 0.8s !important; }
	.speed9  { --radial-speed: 0.9s !important; }
	.speed10 { --radial-speed: 1.0s !important; }