//- Colors:
	$gold: #FCD116;
	$red: #610b0d;
	$purple: #7a2593;
	$lightgray: #9a9a9a;
	$graytrans: rgba(28, 28, 28, 0.14902);
	$grayshadow: #7c7c7c;
	$blacker: #040404;
	$ccc: #cccccc;
	//- GRAY IN ROLL TEMPLATE
	$blackish: #1c1c1c;
	//-(primaryly on the NPC sheet)
	$gray: #555;
	$blacker: #040404;
	$white: #fff;


/********************************************************************************************************/
/********************************* GLOBAL SETTINGS *******************************************************/
/********************************************************************************************************/
/* GLOBALS
	============================= */
	@import 'src/scss/_global'; 

/* SWITCHES
	============================= */
	@import 'src/scss/_switch'; 

/* MIXIN
	============================= */
@mixin repeatingInformation($endColumn, $longCollapseFlag) {
	label[data-i18n-title='notes'], 
	h3[data-i18n='notes'], 
	div.sheet-collapse { 
		grid-column: 1 / #{$endColumn};
	}

	input.sheet-collapse-flag {
		@if $longCollapseFlag {
			grid-area: 1 / 1 / 1 / #{$endColumn - 1};
			position: absolute;
			width: 100%;
		} @else {
			grid-area: 1 / #{$endColumn - 2} / 1 / #{$endColumn - 1};
		}
	}

	input.sheet-collapse-flag + span.sheet-pictos { 
		grid-area: 1 / #{$endColumn - 2} / 1 / #{$endColumn - 1}; 
	}

	input.sheet-settings-flag, 
	input.sheet-settings-flag + span.sheet-pictos { 
		grid-area: 1 / #{$endColumn - 1} / 1 / #{$endColumn}; 
	}
}

/***** TABS FOR SHEETS *****/
	.sheet-tabs {
		button {
			&[type='action'] {
				background-color: #333;
				border-radius   : 2px;
				border          : 1px solid #000;
				box-shadow      : inset 0px 0px 3px 1px #7c7c7c;
				color           : #fff;
				font-size       : 1em;
				font-weight     : bolder;
				text-transform  : capitalize;
				padding         : 5px;

				&.sheet-pictos {text-transform: lowercase;}
			}

			&[type='roll'] {
				background: none;
				border: none;
				color         : #fff;
				font-family   : 'dicefontd6';
				font-size     : 2.5em;
				vertical-align: top;

				&:hover {
					text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px #e31715;
				}
			}
		}

		h2 {
			color: #fff;
			font-size: 1em;
			text-transform: capitalize;
			text-align: right;
			line-height: 2em;
			margin-right: 5%;
		}
	}

/***** TABS FOR SHEETS *****/
.sheet-settings-toggle,
.sheet-settings-flag {
	 input { width: 3em;}

	input[type='checkbox'] + span {
      background : transparent;
      @extend .sheet-pictos;
      font-size  : 20px;
      height     : 20px;
      text-align : center;
      width      : 20px;
  }
}


/***** GENERIC STYLES *****/
%parantheseNumbers {
	vertical-align: middle;

	&:before { content: '('; }
	&:after { content: ')'; }
}

%toggleCheckbox,
input.sheet-toggle {
	position: absolute;
	opacity: 0;
	z-index: 2;
}

%toggleRelative {
	position: relative;
	opacity: 0;
	z-index: 2;
}

%settingsCheckboxes { 
	& + span { opacity: 0; }
	&:checked + span { opacity: 1; }

	&:checked ~ .sheet-settings {
		display: inline-grid;
		margin-bottom: 2%;
	}
}

%borderBottom { border-bottom: 1px solid #333; }

.sheet-center { text-align: center; }

select {
	&.sheet-attribute-select {
		option:nth-of-type(1n+5) { color: $red; }
		option:nth-of-type(1n+9) { color: #7a2593;	}
	}

	&.sheet-limit-select  {
		option:nth-of-type(1n+5) { color: $red; }
	}
}

@import 'src/scss/_matrixdevice'; 

/***** GRID *****/
%gridGap {
	grid-column-gap: 1%;
	grid-row-gap: 1%;
}


/******************************************************************************/
/********************************* VARIABLES *********************************/
/****************************************************************************/
$tabs:'arms', 'augs', 'core', 'gear', 'options', 'social', 'magic', 'matrix', 'vehicle';
$characterTypes: 'npc', 'pc';
$specialCharacters: 'magic', 'resonance';
$npcTypes: 'grunt', 'host', 'sprite', 'vehicle';

/***************************************************************************************/
/************************** START OF THE PC SHEET *************************************/
/*************************************************************************************/
	.sheet-pc {
		background-color: #333;
		background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Shadowrun5thEdition/images/Blackbackground.jpg');
		background-size : cover;
		border          : 3px solid;
		box-shadow      : inset 0px 0px 3px 1px #7c7c7c;
		margin-left     : -1%;
		padding-left    : 0.5%;

		button > h2:hover,
		button > span:hover,
		label > button[type='roll']:hover,
		.sheet-repeat-box button[type='roll']:hover,
		.sheet-con-track button[type='action']:hover,
		button[data-i18n='default']:hover {
			color      : #fff;
			text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px $red;
		}

		h1 {
			background-color: $red;
			color           : #fff;
			font-size       : 1em;
			letter-spacing  : 2px;
			line-height     : 20px;
			padding-left    : 5px;
			padding-right   : 5px;
			text-transform  : uppercase;
		}
	
		h2 {
			font-size  : 0.9em;
			line-height: 25px;
			text-transform: capitalize;
			@extend %display-inline-grid;
		}
	
		h3 {
			color    : hsla(0, 0%, 20%, 0.59);
			font-size: 0.8em;
			text-transform: capitalize;

			@extend %display-inline-grid;
		}

		hr { margin: 7px 0px -2px 0px; }

		input {
			border-radius: 0px;
		}

		.sheet-tabs {
			@extend %display-inline-grid;
			grid-template-columns: 1fr 5em 1fr 5em 2.5em 5em 5em 5em 5em 5em 5em 5em;
			grid-column-gap: 0.25%;
			padding: 0px 1% 3% 1%;
			margin-top: 1%;
			grid-row-gap: 10%;

			button[type='roll'] {grid-area: 2 / 5 / 2 / 5;}

				/***** PLAYER DATA INPUTS *****/
			h1 {
				background-color: transparent;
				color: #fff;
				display: inline-block;
				font-size : 1em;
				grid-column: 6 / 8;
				letter-spacing: 2px;
				line-height : 20px;
				margin-left: 5%;
				text-align: right;
				text-transform  : uppercase;
			}

			h2 {
				&[data-i18n-title='/w GM'] { grid-area: 2 / 1 / 2 / 1; }
				&[data-i18n-title='wounds'] { grid-area: 2 / 3 / 2 / 4; }
				&[data-i18n-title='modifiers'] { grid-area: 3 / 1 / 3 / 1; }
				&[data-i18n-title='edge'] { grid-area: 3 / 3 / 3 / 4; }
			}

			@each $highlightButton in $tabs {
				input[value*='#{$highlightButton}'] ~ button[name*='#{$highlightButton}'] { 		
					@extend %highlight-button; 
				}
			}

			img { 
				grid-area: 1 / 1 / 2 / 6;
				height: 100%;
				width: 100%;
			}

			label {
				&[data-i18n-title='character name'] > input[type='text'],
				&[data-i18n-title='player name'] > input[type='text'] {
					color           : #fff;
					font-weight     : bolder;
					background-color: transparent;
					border          : none;
					box-shadow      : none;
					border-bottom   : 2px solid #fff;
					border-radius   : 0px;
					height          : 30px;
					width           : 100%;
					grid-column: 4;
				}

				&[data-i18n-title='character name'] { grid-area: 1 / 8 / 1 / 14; }
				&[data-i18n-title='player name'] { grid-area: 2 / 8 / 2 / 14; }

				&[data-i18n-title='whisper rolls to gm']{ grid-area: 2 / 2 / 2 / 3; }
				&[data-i18n-title='wounds'] { grid-area: 2 / 4 / 2 / 5;}
				&[data-i18n-title='modifiers'] { grid-area: 3 / 2 / 3 / 3;}
				&[data-i18n-title='edge'] { grid-area: 3 / 4 / 3 / 5;}
			}
		}

		input.sheet-settings-toggle,
		input.sheet-settings-flag,
		input.sheet-collapse-flag,
		input[type='radio'] {
			@extend %toggleRelative;
			
			& + span { font-family: 'pictos'; }
			
			&:checked + span {  color: $red; }
		}

		select {
			height: 1.8em;
			padding: 0px;
			color: $blacker;
		}

		div.sheet-core-info {
			h2{ margin-right: 1%; }

			input[type='text'], input[type='number'] { 
				background-color: transparent; 
				border: none;

				&:placeholder-shown {
					background-color: $graytrans;
				}
			}
		}

		input.sheet-display-flag { position: absolute; }

		/***** DECORATIVE BOX THAT ADDS THE RED OUTLINE ON PC SHEET *****/			
		div.sheet-border-box {
			background-image: -moz-linear-gradient($red, transparent), -moz-linear-gradient($red, transparent);
			background-image: -o-linear-gradient($red, transparent), -o-linear-gradient($red, transparent);
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from($red), to(transparent));
			background-image: -webkit-linear-gradient($red, transparent);
			background-image: linear-gradient($red, transparent), linear-gradient($red, transparent);
			border-top      : 2px solid $red;
			clear           : both;
			border-top-right-radius: 10px;
			border-top-left-radius : 0px;

			button[type='roll'] {
				font-size: 0.8em;
				font-weight: bold;
			}

			div.sheet-pc-box {
				border-top-right-radius: 10px;
				border-top-left-radius : 0px;
			} 	
		} 

		/***** REPEATING CONTAINERS *****/
		div.sheet-repeating-container {
			div.repitem {
				display: inline-grid;
				padding: 1% 0.5%;
				margin-bottom: 0px;
				@extend %gridGap;
				@extend %borderBottom;

				button[type='roll'] { 
					text-align: left; 
				}

				input { 
					&:nth-of-type(1n+2) { text-align: center; } 

					&[type='text'],
					&[type='number'] { 
						@extend %borderBottom;
						width: 100%; 
					}
				}

				label { 
					padding-right: 0px;

					input[name='attr_name'],
					input[name='attr_weapon'],
					input[name='attr_quality'] { 
						text-align: left; 
					}

					&[data-i18n-title='modifier'] {
						width: 3em;
					}
				}

				div.sheet-settings { 
					background-color: $ccc;
					border-left: 2px solid $gray;
					@extend %gridGap;
					padding: 2% 1%;
					width: 100%;

					select { text-transform: capitalize; }
				}

				div.sheet-collapse { padding-left: 5%; }
			}
		}

		div.repitem {
			width: 100%;

			input[type='number'] { text-align: center; }
		}

		/***** STATIC  *****/
		div.sheet-static { 
			margin-right: 0.5%;

			div.sheet-border-box,
			div.sheet-border-box .sheet-pc-box {
				border-top-right-radius: 0px;
				border-top-left-radius : 10px;
			}	
		}


		/***** CORE  *****/
		div.sheet-core {
			div.sheet-armor-buttons {
				display    : inline-block;
				font-size  : 1.5em;
				line-height: 20px;
				margin-left: 1%;
				width      : 35%;

				button {
					&[type='roll'] { margin-right: -5px; }
					&[name='roll_defense'] { 
						background-color: $gray;
						color: $white;
					}
				}

				span { font-size  : 1em; }
			}

			/***** QUALITIES *****/
			div.sheet-quality-box {
				div.sheet-htab input[type='radio'] {
					margin-right: -100px;
					width       : 100px;
				}

				div.sheet-header:nth-of-type(2) .sheet-htab input[type='radio'] {
					margin-right: -150px;
					width       : 150px;
				}

				div.sheet-quality {
					$qualityGrid: 1fr 3em 1.5em 1em 1em;


					h2:nth-of-type(2) { text-align: center; } 

					div.sheet-headers {
						display: grid;
						grid-template-columns: $qualityGrid;
						@extend %gridGap;
					}

					div.repitem {
						grid-template-columns: $qualityGrid;
						@include repeatingInformation(6, false);

						div.sheet-settings { 
							grid-column: 1 / 6;
							grid-template-columns: $qualityGrid;
						}
					}
				}

				div.sheet-martial {
					$martialGrid: 2fr 1fr 1.5em 1em 1em;


					h2:nth-of-type(2) { text-align: center; } 

					div.sheet-headers {
						display: grid;
						grid-template-columns: $martialGrid;
						@extend %gridGap;
					}

					div.repitem {
						grid-template-columns: $martialGrid;
						@include repeatingInformation(6, false);

						div.sheet-settings { 
							grid-column: 1 / 6;
							grid-template-columns: $martialGrid;
						}
					}
				}
			}
		}

		/***** SKILLS *****/
		div.sheet-skill-box {
			$skillGrid: 1fr 3.5em 5em 5em 1em 1em;

			h2:nth-of-type(1n+2) { text-align: center; }

			label {
				display       : inline-block;
				font-size     : 0.8em;
				text-transform: capitalize;

				&[data-i18n-title='ratingmodifier'] { 
					grid-area: 1 / 3 / 1 / 7; 
					width: 100%;

					input[type='number'] { width: 3em; }
				}

				&[data-i18n-title='specialization'] { grid-area: 3 / 1 / 3 / 7; }
				&[data-i18n-title='notes'], textarea { grid-area: 4 / 1 / 4 / 7; }

				& > input {
					@extend %borderBottom;
					text-align: left;
					border-radius: 0px;
					width: 100%;
				}
			}

			input[name='attr_skill'] { @extend %borderBottom; }

			input[name='attr_rating_modifier'] { width: 3.5em; }

			input[name='attr_display_specialization'][value=' '] ~ div.sheet-buttons button[name*='specialization'],
			input[name='attr_display_specialization'][value=''] ~ div.sheet-buttons button[name*='specialization'] { @extend %display-none; }

			div.sheet-row-long {
				grid-template-columns: $skillGrid;
				padding: 1% 0.5%;
				width: 100%;

				@extend %display-inline-grid;
				@extend %gridGap;

				h3:nth-of-type(1n+2) { text-align: center; }
			}


			div.repitem {
				grid-template-columns: $skillGrid;

				@include repeatingInformation(7, false);

				input[name='attr_damage'],
				input[name='attr_dicepool_modifier'] {
					width: 3.5em;
				}

				div.sheet-settings { 
					grid-column: 1 / 7;
					grid-template-columns: $skillGrid;
				}
			}
		}

		/*** ARMS ****/
		div.sheet-arms {
			div.sheet-headers {
				display: grid;
				@extend %gridGap;

				h2:nth-of-type(1n+2) { text-align: center; }
			}

			div.repitem {
				h3 { color: $blacker; }

				input { 
					&:nth-of-type(1n+2) { text-align: center; }

					&.sheet-flag-primary[value='primary'] + button {
						background-color: $gold;
						border-bottom: 2px solid $blacker;
					}
				}
			}

			div.sheet-weapons {
				$weaponsGrid: 25% 1.25fr 3em 2.5em 3em 1fr 1fr 1em 1em;
				div.sheet-headers { grid-template-columns:$weaponsGrid; }

				div.repitem {
					grid-template-columns: $weaponsGrid;
					@include repeatingInformation(10, false);

					div.sheet-settings { 
						grid-column: 1 / 10;
						grid-template-columns: $weaponsGrid;
					}
				}

				div.sheet-weapon-range,
				div.sheet-weapon-melee {
					width: 100%;
					div.sheet-row { 
						grid-column: 1 / 9;

						label[data-i18n-title="modeoptions"],
						label[data-i18n-title="range"]{ 
							width: 25%; 
						}

						input[type='number'] {width: 3em;}

						select {width: 30%;}
					};

					div.sheet-exotic-warning { display: none; }

					input[value='0'] + div.sheet-exotic-warning  { display: block; }
				}
			}

			div.sheet-armor {
				$armorGrid: 30% 3.5em 2.5em 2.5em 2.5em 2.5em 2.5em 1em 1em;
				div.sheet-headers { grid-template-columns:$armorGrid; }

				div.repitem {
					grid-template-columns: $armorGrid;
					@include repeatingInformation(11, false);

					div.sheet-settings { 
						grid-column: 1 / 11;
						grid-template-columns: $armorGrid;

						div.sheet-row {
							grid-column: 1 / 11;
						}
					}
				}

			}
		}

		/*** AUGS ****/
		div.sheet-augs {
			$augsGrid: 1fr 5em 5em 1em 1em;;

			div.sheet-headers {
				display: grid;
				grid-template-columns:$augsGrid;
			} 

			div.repitem {
				grid-template-columns: $augsGrid;
				@include repeatingInformation(6, true);

				input[name='attr_augementation'] { text-align: left; }

				div.sheet-settings { 
					grid-column: 1 / 6;
					grid-template-columns: $augsGrid;
				}
			}	
		}

		/*** GEAR ****/
		div.sheet-gear {
			$gearGrid: 1fr 5em 5em 1em 1em;;

			div.sheet-headers {
				display: grid;
				grid-template-columns:$gearGrid;
			} 

			div.repitem {
				grid-template-columns: $gearGrid;
				@include repeatingInformation(6, true);

				input[name='attr_item'] { text-align: left; }

				div.sheet-settings { 
					grid-column: 1 / 6;
					grid-template-columns: $gearGrid;
				}
			}	
		}

		/***** MAGIC *****/
		div.sheet-magic {
			$magicGrid: 30% 1.5fr 1.5fr 2fr 2em 1em 1em;

			input.sheet-magic-toggle[value='rituals'] ~ .sheet-headers h2:nth-of-type(1n+2) {
				@extend %display-none;
			}

			h2:nth-of-type(1n+2) { text-align: center; }
			h3 { color: $blacker; }

			div.sheet-headers {
				display: grid;
				@extend %gridGap;
				grid-template-columns:$magicGrid;

				h3:nth-of-type(1n+2) { text-align: center; }
			} 


			/***** SPELLS & PREPARTATIONS *****/
			div.sheet-spellsForumlas {
				div.repitem {
					grid-template-columns: $magicGrid;

					@include repeatingInformation(8, false);

					input[name='attr_damage'],
					input[name='attr_dicepool_modifier'] {
						width: 3.5em;
					}

					select[name='attr_category'] { grid-row: 2; }

					div.sheet-row { grid-column: 1 / 6; }

					div.sheet-settings { 
						grid-column: 1 / 8;
						grid-template-columns: $magicGrid;
					}
				}
			}

			/***** RITUALS *****/
			div.sheet-magic-rituals {
				$ritualsGrid: 1fr 1em 1em;

				@include repeatingInformation(4, false);

				div.repitem {
					grid-template-columns: $ritualsGrid;

					label {
						&[data-i18n-title='name'] { grid-column: 1 / 4; }
					}

					div.sheet-row { grid-column: 1 / 4; }
				}

				div.sheet-settings {
					grid-template-columns: $ritualsGrid;
					grid-column: 1 / 4;
				}
			}

			div.sheet-magic-preps, div.sheet-magic-spells {
				textarea { width: 93%; }
			}

			/***** PREPARATIONS *****/
			div.sheet-magic-preps {
				/* READIED PREPARATIONS */
				div.sheet-prepared-preparations {
					$preparationsGrid: 40% 1fr 1fr 2fr 1em 1em;

					div.sheet-headers {
						grid-template-columns:$preparationsGrid ;
					} 

					div.repitem {
						grid-template-columns: $preparationsGrid ;

						@include repeatingInformation(7, false);

						div.sheet-settings { 
							grid-column: 1 / 7;
							grid-template-columns: $preparationsGrid;

							select { grid-column: 4 / 7; }

							textarea { width: 100%; }
						}
					}
				}
			}


			/***** ADEPT POWERS *****/
			div.sheet-powers {
				$powersGrid: 1fr 3em 1em 1em;;

				div.sheet-headers {
					grid-template-columns:$powersGrid;
				} 

				div.repitem {
					grid-template-columns: $powersGrid;
					@include repeatingInformation(5, true);

					div.sheet-settings { 
						grid-column: 1 / 5;
						grid-template-columns: $powersGrid;
					}
				}
			}
		}

		/*** MATRIX ****/
		div.sheet-matrix {
			h3 { color: $blacker; }

			div.sheet-programs {
				$programGrid: 1fr 1em 1em;

				div.repitem {
					grid-template-columns: $programGrid;
					@extend %borderBottom;
					@include repeatingInformation(4, true);
				}

				div.sheet-settings { 
					grid-column: 1 / 4;

					input[type='text'] {
						grid-column: 1 / 4;
						text-align: left; 
					}

					label {
						grid-column: 1 / 4;
					}
				}
			}

			div.sheet-complex-forms {
				$complexFormsGrid: 30% 1fr 1fr 4em 1em 1em;

				div.sheet-headers {
					display: grid;
					@extend %gridGap;
					grid-template-columns: $complexFormsGrid;

					h2:nth-of-type(1n+2) { text-align: center; }
				} 

				div.repitem {
					grid-template-columns: $complexFormsGrid;

					@include repeatingInformation(7, false);

					div.sheet-row {
						grid-column: 1 / 7;
					}

					div.sheet-settings { 
						grid-column: 1 / 7;
						grid-template-columns: $complexFormsGrid;

					}
				}
			}
		}
	}
	@import 'src/scss/_pc'; 


/******************************************************************************************/
/**************************** START OF THE NPC SHEET *************************************/
/****************************************************************************************/
	@import 'src/scss/_npc'; 

/**************************************************************************/
/***************** PC & NPC SHEET SHOW & HIDE SETTINGS *******************/
/************************************************************************/

/* DISPLAY SETTINGS
	============================= */
	@import 'src/scss/_hide'; 
		

/*****************************************************************************************/
/**************************************** FOOTER ****************************************/
/***************************************************************************************/
	/**** Footer ****/
	.sheet-footer {
		border     : none;
		font-size  : 0.55em;
		line-height: 15px;
		margin-top : 15px;
		text-align : left;
		width      : 700px;}

	div.sheet-footer div {
		display: inline-block;
		width: 90%;
	}

	div.sheet-footer img {
		float: right;
		vertical-align: top;
		width: 5%;
	}

/********************************************************************************************************/
/**************************************** REPEATING SECTIONS *******************************************/
/********************************************************************************************************/
	@import 'src/scss/_repeatingsection'; 

/********************************************************************************************************/
/**************************************** Roll template *******************************************/
/********************************************************************************************************/

	@import 'src/scss/_rolltemplate';

/********************************************************************************************************/
/*******************************         Charactermancer        ****************************************/
/******************************************************************************************************/
	@import 'src/scss/_importer';


/********************************************************************************************************/
/*******************************         FireFox             *******************************************/
/******************************************************************************************************/

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;}

input[type=number] {
    -moz-appearance:textfield;}


 /********************************************************************************************/
/*****************         French Adjustments                ********************************/
/*******************************************************************************************/
	@import 'src/scss/_lang-fr';