@import 'src/scss/abstracts/variables'; 
@import 'src/scss/abstracts/mixins'; 

@import 'src/scss/base/base';
@import 'src/scss/base/grid';
@import 'src/scss/base/utilities';
@import 'src/scss/base/typography';

@import 'src/scss/components/switch';
@import 'src/scss/components/switch-3';
@import 'src/scss/components/collapse';
@import 'src/scss/components/indicator';
@import 'src/scss/components/hexagons';
@import 'src/scss/components/conditionmonitor';

@import 'src/scss/pages/tabs/matrix/cyberdeck';

@import 'src/scss/layout/tabs';

/***** 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 *****/
select {
	&.sheet-attribute-select {
		option:nth-of-type(1n+5) { color: $red; }
		option:nth-of-type(1n+9) { color: $purple;	}
	}

	&.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%;
}

/***************************************************************************************/
/************************** 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 $grayshadow;
		margin-left     : -1%;
		padding-left    : 0.5%;

		button[name*='shots']:hover,
		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      : $white;
			text-shadow: $text-shadow;
		}

		button:hover > span {
			color: $white;
		}

		h1 {
			background-color: $red;
			color           : $white;
			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: $white;
				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           : $white;
					font-weight     : bolder;
					background-color: transparent;
					border          : none;
					box-shadow      : none;
					border-bottom   : 2px solid $white;
					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 {
			@extend %toggleRelative;
			
	&:hover {
	cursor: pointer;
	}

	&.sheet-settings-toggle + span { 
		font-family: 'pictos'; 
	}
		
	&:checked + span {  
		color: $red; 
	}

      &:hover + span {
        transform: $button-scale-small;
      }
		}

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

		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%;
				grid-column-gap: 1%;
				@extend %borderBottom;

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

				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; }
		}

  @import 'src/scss/pages/tabs/static';

  @import 'src/scss/pages/tabs/core';

		/***** 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%;
				}
			}

			div.sheet-buttons {
				display: grid;
				grid-template-columns: repeat(2, 1.5fr);
				overflow: hidden;
			}

			input[name='attr_specialization'][value=''] ~ div.sheet-buttons {
				grid-template-columns: 1fr;
			}
				
			input[name='attr_skill'] { @extend %borderBottom; }

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

			input[name='attr_specialization'][value=' '] ~ div.sheet-buttons button[name*='specialization'],
			input[name='attr_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; }
			}

			option.sheet-option-headers {
				opacity: 0.2;
			}

			option.sheet-option-groups {
				font-size: 1em;
				font-style: italic;
			}

			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;
				}
			}
		}

  @import 'src/scss/pages/tabs/arms';

  @import 'src/scss/pages/tabs/augs';

  @import 'src/scss/pages/tabs/gear';


		//used in magic & complex forms
		select.sheet-attribute-select {
			margin-top: 1%;
		}

  @import 'src/scss/pages/tabs/magic';

  @import 'src/scss/pages/tabs/matrix';

  @import 'src/scss/pages/tabs/social';

	@import 'src/scss/pages/tabs/vehicle';
	
	@import 'src/scss/pages/tabs/options';
}

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


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

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

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

/*****************************************************************************************/
/**************************************** FOOTER ****************************************/
/***************************************************************************************/
@import 'src/scss/layout/footer';

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

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

	@import 'src/scss/_rolltemplate';

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



@import 'src/scss/layout/firefox';

@import 'src/scss/layout/lang-fr';