/* ABSTRACTS
  ============================= */
  @import 'src/scss/abstracts/_variables';
  @import 'src/scss/abstracts/_mixins'; 

/* BASE
	============================= */
	@import 'src/scss/base/_base'; 
  @import 'src/scss/base/_placeholders'; 
  @import 'src/scss/base/_generic'; 
  @import 'src/scss/base/_typography'; 

/* SWITCHES
	============================= */
	@import 'src/scss/components/_switch'; 
  @import 'src/scss/components/_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;
  }
}

/***************************************************************************************/
/************************** START OF THE PC SHEET *************************************/
/*************************************************************************************/
	.sheet-pc {
		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 $accent, 0 0 5px $primary;
		}

		h1 {
			background-color: $primary;
			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;
				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'] {
					font-weight     : bolder;
					background-color: transparent;
					border          : none;
					box-shadow      : none;
					border-bottom   : 2px solid $graytrans;
					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: $accent
      }
		}

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

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

		/***** DECORATIVE BOX THAT ADDS THE RED OUTLINE ON PC SHEET *****/			
		div.sheet-border-box {
			background-image: -moz-linear-gradient($accent, transparent), -moz-linear-gradient($accent, transparent);
			background-image: -o-linear-gradient($accent, transparent), -o-linear-gradient($accent, transparent);
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from($accent), to(transparent));
			background-image: -webkit-linear-gradient($accent, transparent);
			background-image: linear-gradient($accent, transparent), linear-gradient($accent, transparent);
			border-top      : 2px solid $primary;
			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 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: 1.5fr 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(6, false);

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

				div.sheet-settings { 
					grid-column: 1 / 6;
					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,
          &.sheet-flag-primary[value='primary'] + div.sheet-primary {
            background-color: $primary;
            border-bottom: 2px solid $blacker;
            border-right: 0;
          }


					&.sheet-flag-primary[value='primary'] + button:hover {
            background-color: $accent;
            color: $white;
					}
				}

        div.sheet-primary {
          padding: 0.5% 1%;
        }

        h2,
        label.sheet-protections {
          width: 11%;
        }

        h2:nth-of-type(1n+2),
        label.sheet-protections:nth-of-type(1n+2) {
          margin-left: 2%;
        }

        label.sheet-protections > input {
          width: 100%;
        }
			}

			div.sheet-weapons {
				div.sheet-headers { 
          grid-template-columns: 1fr 4em 3em 3em 3em 3em 1em 1em; 
        }

				div.repitem {
          $weaponsGrid: 1fr 4em 3em 3em 3em 3em 1em 1em;
					grid-template-columns: $weaponsGrid;
					@include repeatingInformation(9, false);

					div.sheet-settings { 
						grid-column: 1 / 9;
						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: 1fr 5em 5em 1em 1em;
				div.sheet-headers { grid-template-columns:$armorGrid; }

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

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

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

			}
		}

		/*** 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-commlinks {
        $commlinkGrid: auto 1fr auto 1fr;

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

          input:not([value='']) {
            background-color: transparent;
          }

          .sheet-con-hex {
            grid-column: 1 / 5;
          }
        }
      }

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

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

          input[name='attr_program_on'] {
            grid-area: 1 / 1 / 1 / 1;

            &:checked + span {
              color: $accent;
              font-weight: bolder;

              & + span {
                font-weight: bolder;
              }
            }

            & + span {
              grid-area: 1 / 1 / 1 / 1;
            }
          }
				}

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

          div.sheet-col {
            &:nth-of-type(1) {
              grid-column: 1 / 4;

              & > label {
                width: 100%;
              }
            }

            &:nth-of-type(2) {
              grid-column: 4 / 6;
              text-align: center;

              & > label {
                width: 3em;
              }
            }

            //Select row
            &:nth-of-type(3) {
              grid-area: 2 / 1 / 2 / 3;
            }

            &:nth-of-type(4) {
              grid-area: 2 / 3 / 2 / 4;
            }

            &:nth-of-type(5) {
              grid-column: 4 / 6;
              text-align: center;

              & > label {
                width: 3em;
              }
            }
          }

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

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

    /*** SOCIAL ****/
    div.sheet-social {

      div.sheet-lifestyle {
        $lifestyleGrid: 1fr 1.5em 1em 1em;
        div.repitem {
          grid-template-columns: $lifestyleGrid;
          @include repeatingInformation(5, false);

          div.sheet-collapse {
            padding-left: 2%;

            h3 {
              margin-right: 1%;
            }
          }

          div.sheet-settings { 
            grid-column: 1 / 5;
            padding: 1% 2% 5% 2%;
            min-height: 300px;

            textarea {
              height: 45px;
              min-height: 45px;
            }
          }
        }
      }

      div.sheet-contacts {
        $contactsGrid: 1fr 4em 5.5em 4em 1.5em 1em 1em;

        div.sheet-headers {
          display: grid;
          grid-template-columns: $contactsGrid;
          grid-column-gap: 1%;
          width: 100%;
        }

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


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

     /*** Vehicle ****/
     div.sheet-vehicle {
      
     }

     /***** SECONDARY HEADERS LIKE ON SKILLS *****/
    div.sheet-htab {
      margin-right: -47px;

      input {
        &[type='radio'] {
          margin-right: -80px;
          top         : 4px;
          width       : 80px;

          & + h1 {
            color: #9a9a9a;
          }

          &:hover ~ h1,
          &:checked ~ h1  {
            color: $accent
          }
        }
      }
    }
	}
	@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 ****/
	div.sheet-footer {
		border     : none;
		font-size  : 0.55em;
		line-height: 15px;
		margin-top : 15px;
		text-align : left;
		width      : 700px;

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

    img {
      float: right;
      vertical-align: top;
      width: 5%;
    }
  }

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

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

	@import 'src/scss/_rolltemplate';

/********************************************************************************************************/
/*******************************         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/layouts/_lang-fr';