@use 'Mixins/_systemplaceholders.scss';

//Sets the font-size to be used by rem unit calls
html{
  font-size: 13px;
}
//Sets the bio/charsheet/a&a tab container to be sticky and float at the top
ul.nav-tabs.nav{
  position:sticky;
  top:0;
  background-color:white;
  z-index:9999;
  margin-bottom:0px;
}
.nav-tabs li a{
  font-family:var(--midHeaderFont);
  padding:{
    top: 18px;
    bottom:15px;
  };
  &[data-tab='charsheet']{
    background-image: url(https://s3.amazonaws.com/files.d20.io/images/259063058/V4Hm27FqfgBujU8bI74Xaw/original.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding:{
      left:50px;
      right:12px;
    };
  }
}
.itemcontrol{
  z-index:10;
}
.image-input{
  cursor:pointer;
}
//Default settings for the .charsheet container
.ui-dialog .tab-content .charsheet{
  padding-top:0px;
  @extend %defaultStyles;
  .adaptive-text{
    @extend %adaptiveText;
  }
  .repeat-columns{
    @extend %grid;
    > *{
      background-color:var(--subHeadBackColor);
      border:1px solid black;
    }
  }
  .image-container{
    @extend %grid;
    grid-template-columns:"content";
  }
  .image-container__input{
    z-index:10;
    background-color:white;
    box-shadow:0 0 var(--grid-gap) var(--grid-gap) white;
    grid-area:content;
    place-self:center;
    width:calc(100% - (var(--big-gap) * 2));
    transition:opacity var(--focusTiming),height var(--focusTiming);
    opacity:0;
    height:0;
    overflow:hidden;
    span{
      white-space: pre-wrap;
    }
    input{
      width:100%;
      box-sizing:border-box;
    }
    &.active{
      opacity:1;
      height:auto;
    }
  }
  .image-container__button{
    grid-area:content;
  }
  .base-container{
    @extend %grid;
    grid-template-areas:'content';
  }
  .base-container__actual{
    grid-area:content;
  }
  .base-container__interact{
    grid-area:content;
    z-index:1;
  }
}
#main-nav{
  --tabColor:white;
  --tabBorder:drop-shadow(1px 0 0 grey) drop-shadow(-1px 0 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(0 1px 0 black);
	display:grid;
	gap:var(--half-gap);
  grid-template-columns:1fr auto 1fr;
	align-items:center;
	position:sticky;
	top:60px;
	background:white;
	box-shadow:-10px 0 0 0 white,10px 0 0 0 white,0 -6px white;
	z-index:100;
	border-bottom:1px solid black;
	.nav__button{
		font-style:normal;
    color:grey;
	}
  .nav__button--settings{
    @extend %pictos;
    &.active,
    &:hover{
      color:black;
    }
  }
  &.system-remnant{
    .nav__button--tab {
      background-color: var(--tabColor);
      position: relative;
      display: inline-block;
      z-index: 2;
      padding:calc(var(--half-gap) + 0.1rem);
      filter:var(--tabBorder);
      &.active,
      &:hover{
        @include systemplaceholders.activeTab;
      }
      &.active{
        pointer-events: none;
      }
      &:before{
        height: 100%;
        width: 50px;
        background-color: var(--tabColor);
        content: "";
        position: absolute;
        z-index: -1;
      }
    }
    .nav__button--tab--left{
      border-radius:0 50% 0 0;
      margin-left:1px;
      justify-self:start;
      &:before{
        border-radius: 0 2px 0 0;
        left: calc(100% - 40px);
        top: 0px;
        -webkit-transform: skewX(45deg);
        transform: skewX(45deg);
      }
    }
    .nav__button--tab--right{
      border-radius:50% 0 0 0;
      margin-right:1px;
      justify-self:end;
      &:before{
        border-radius: 2px 0 0 0;
        left: -5px;
        top: 0px;
        -webkit-transform: skewX(-45deg);
        transform: skewX(-45deg);
      }
    }/*
    .tab:nth-of-type(2) {
      background-color: #555;
      top: 10px;
      left: 30px;
      z-index: 1;
      color: #EEE;
    }
    .tab:nth-of-type(2):before {
      background-color: #555;
    }
    .tab:nth-of-type(2):hover,
    .tab:nth-of-type(2):hover:before {
      background-color: #159;
      transition: 0.3s ease-out;
    }*/
  }
}
#main{
  .system-header{
    margin:0 auto;
    width:200px;
  }
  article{
    padding:var(--grid-gap);
  }
  article:not(.active){
    display:none;
  }
  .roller{
    @extend %roller;
  }
  .translate-control{
    &:checked ~ .untranslated,
    &:not(:checked) ~ .translated{
      display:none;
    }
  }
  .section{
    transition:box-shadow var(--focusTiming),transform;
    border-radius:6px;
    padding:var(--half-gap);
    &:hover{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
  }
}
// Settings Styling
#settings{
  @extend %article-layout;
  .input-label{
    justify-content: space-between;
    [name]:not([type=number], [type=checkbox], [type=radio]){
      width:auto;
      flex: 0 0 auto;
    }
  }
  section{
    align-self:stretch;
    align-content:start;
  }
}
// Character styling
#character{
  @extend %article-layout;
  &.system-remnant{
    grid-template-areas:
      "."
      "skills"
      "skills"
    ;
    border:{
      left:1px solid black;
    }
    grid-template-rows:repeat(2,auto) 1fr;
  }
}
#character-info{
  @extend %repeat-section-layout;
  > .health-track{
    margin:0 -5px;
  }
}
#stats{
  grid-template-columns: auto 1fr repeat(2,auto);
  grid-template-areas:
    'header header header header'
    'stat_points . . .'
    'reserve . . .'
    '. . . .'
    'header2 header2 header2 header2'
  ;
  h2{
    grid-area:auto;
    grid-column:1/-1;
  }
  > button{
    grid-column:2;
  }
  @each $point in stat_points,reserve{
    > .#{$point}{
      grid-area:$point;
      justify-self:end;
    }
  }
  > .reserve{
    box-sizing:border-box;
  }
  .equipment{
    @extend %grid;
    grid-template-areas: 'header';
    gap:var(--half-gap);
    grid-column:1/-1;
    place-self:stretch;
    h2{
      grid-area:header;
    }
    .repitem{
      @extend %grid;
    }
    .repeat-columns,
    .repitem{
      grid-template-columns: 1fr 2.5rem;
    }
  }
}
#secondary{
  > .secondaries{
    @extend %grid;
    grid-template-columns:1fr repeat(3,auto);
    grid-template-areas:'header header header header';
  }
  > .combat-gear{
    @extend %grid;
    grid-template-areas:'header';
  }
}
#skill{
  @extend %repeat-section-layout;
  grid-area:skills;
  .repcontainer{
    gap:0;
  }
  .repitem{
    @extend %grid;
    position:relative;
    span{
      align-self:center;
      text-align:left;
    }
  }
  .repeat-columns,
  .repitem{
    grid-template-columns:1rem 1fr 3rem 4rem 2.5rem;
    > input{
      width:100%;
    }
  }
  .repeat-columns{
    @each $num in 1,2,3,4{
      :nth-child(#{$num}){
        grid-column:$num + 1;
      }
    }
  }
  .raw-control:not(:checked) + .raw,
  .raw-control:checked ~ .custom{
    display:none;
  }
  .roller.raw{
    grid-column:span 2;
  }
}
@media (min-width:680px) {
  #weapon,#remnant-weapons{
    grid-column:span 2;
  }
}
@media(min-width:1300px){
  #main{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:var(--big-gap);
    .system-header{
      grid-column:1/-1;
    }
    .sheet-state:not([value='settings']){
      ~ article:not(#settings){
        display:grid;
        align-self:start;
      }
      ~ #main-nav{
        .nav__button--tab{
          @include systemplaceholders.activeTab;
          pointer-events: none;
        }
      }
    }
  }
  #settings{
    grid-column:1/-1;
  }
  #main-nav{
    grid-column:1/-1;
  }
}
#weapon{
  @extend %repeat-section-layout;
  input[type='text']{
    width:100%;
  }
  .repitem{
    @extend %grid;
    row-gap:var(--half-gap);
    > .underlined{
      width:100%;
    }
  }
  span.underlined{
    display:block;
    text-align:center;
    padding:2px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    border:{
      width:1px 3px;
      style:solid;
      color:transparent transparent black transparent;
    };
  }
  .repeat-columns,
  .repitem{
    grid-template-columns:1rem 1fr 10rem 7rem;
    align-items:end;
  }
  .repeat-columns{
    @each $num in 1,2,3{
      :nth-child(#{$num}){
        grid-column:$num + 1;
      }
    }
  }
  .headed-textarea{
    grid-column:1/-1;
  }
}
#adjustments{
  display:contents;
  .repitem{
    @extend %grid;
    gap:var(--half-gap);
  }
  input[type='text']{
    width:100%;
  }
  .subsection{
    @extend %repeat-section-layout;
  }
}

// Battle Remnant Styling
#remnant{
  @extend %article-layout;
  &.system-remnant{
    grid-template-areas:
      "image"
      "image"
    ;
    border:{
      right:1px solid black;
    }
    grid-template-rows:auto 1fr;
  }
}
#remnant-pic{
  grid-area:image;
  >.input-label{
    justify-self:start;
  }
}
#remnant-ratings{
  @extend %grid;
  grid-template-columns:1fr repeat(2,auto);
  grid-template-areas:'header header header';
  .remnant-skills{
    @extend %repeat-section-layout;
    grid-template-areas:'header header header';
    place-self:stretch;
    grid-column:1/-1;
    gap:0;
    *{
      place-self:stretch;
    }
    input{
      width:100%;
    }
    &,
    .repeat-columns{
      grid-template-columns:1fr 4rem 3rem;
      *{
        align-self:center;
      }
    }
    .repeat-columns{
      grid-column:1/-1;
      :not(:first-child){
        text-align:center;
      }
    }
    .roller{
      justify-self:start;
    }
    input{
      justify-self:center;
    }
  }
}
#remnant-stats{
  @extend %grid;
  grid-template-columns:1fr repeat(2,auto) 1fr repeat(2,auto);
  grid-template-areas:
    'header header header header header header'
    '. . . . . .'
    '. . . . . .'
    '. . . . . .'
    'assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_input'
    'strike_damage_label  strike_damage_label  strike_damage_label  strike_damage_label  strike_damage_label  strike_damage_input'
    'strike_range_label   strike_range_label   strike_range_label   strike_range_label   strike_range_label   strike_range_input'
  ;
  @each $field in strike_damage,strike_range,assault_damage{
    .#{$field}_label{
      grid-area:#{$field}_label;
    }
    .#{$field}_input{
      grid-area:#{$field}_input;
    }
  }
}
#remnant-specialty{
  @extend %repeat-section-layout;
}
#remnant-trait{
  @extend %repeat-section-layout;
  .repeat-columns,
  .repitem{
    grid-template-columns:1fr 4rem 4rem;
  }
  .repitem{
    @extend %grid;
  }
}
#remnant-drone{
  @extend %repeat-section-layout;
  .repitem{
    @extend %grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--tiny-gap) var(--half-gap);
  }
  .input-label--button{
    grid-column:1;
  }
  .strikerange{
    grid-column:2;
  }
  .input-label{
    span,button{
      text-align:left;
    }
    &:not(.input-label--dual){
      :not([name]){
        flex:1 1 0;
      }
    }
  }
  .structure{
    display:flex;
    gap:var(--half-gap);
    grid-column:1/-1;
    place-self:center end;
    grid-column:span 2;
    *{
      align-self:center;
    }
  }
}
#remnant-weapons{
  @extend %repeat-section-layout;
  .repeat-columns,
  .repitem{
    grid-template-columns:1rem 1fr 5rem 4rem 7rem 8rem 5rem;
  }
  .repeat-columns{
    @each $num in 1,2,3,4,5,6{
      :nth-child(#{$num}){
        grid-column:$num + 1;
      }
    }
  }
  .repitem{
    @extend %grid;
  }
}
/*
Roll Template
#rolltemplate
*/
.sheet-rolltemplate-rapidfire{
  @extend %font-vars;
	--templateRadius: 1rem;
	--dieSize: 50px;
	--templateBorderW: 2px 5px 2px 5px;
	--fumbleColor: red;
	--critColor: green;
	--innerBorderRadius: 5px;
	--borderSize:1px;
  --sizeFactor: 6;
  --cornerSize: calc(1107px / var(--sizeFactor)) calc(952px / var(--sizeFactor));
  --headSideMargin:40px;
  --headVerticalMargin:10px;
  --circleSize:73px;
  --hexagonBackgroundImage:url('https://s3.amazonaws.com/files.d20.io/images/258492885/gzYgspdnfa8K2zUgTrgV3g/original.png');
	margin:{//ensures that the template fills the chat window
		left: -40px;
		right: -5px;
	}
  @extend %defaultStyles;
  a[href^='!'],
  a[href^='~']{
    font-family: var(--topHeaderFont);
    background-color: transparent;
    color: black;
    font-weight: 700;
    padding: 0;
  }
  h1,h2,h3,h4,h5,a{
    white-space: pre-wrap;
  }
	&:not(:first-child){//Moves the template to accomodate the sender tag
		margin-top:10px;
	}
  .sheet-content{
    @extend %grid;
    overflow:hidden;
  }
	> .sheet-template{
		overflow:hidden;
    --hexColor:#000000;
    &.sheet-system-remnants{
      padding:15px 10px;
      > .sheet-content{
        background-color: #c2c2c2;
        background:{
          image:var(--hexagonBackgroundImage);
          position:top left;
          size:400px auto;
          repeat:no-repeat;
        };
        padding:0 10px;
        border-radius:10px;
        border:5px solid black;
        grid-template-columns:[roll-start footer-start] var(--headSideMargin)  [header-start] 1fr [damage-start] 1fr [roll-end difficulty-start] 1fr [damage-end] 1fr [footer-end] var(--headSideMargin)[difficulty-end header-end];
        grid-template-areas:
          '.            header       header       header       header       header'
          '.            .            .            .            .            .'
          '.            .            .            .            .            .'
          '.            .            .            .            .            .'
          '.            .            .            .            .            .'
          'description  description  description  description  description  description'
          'footer       footer       footer       footer       footer       .'
        ;
        &.sheet-single-roll{
          .sheet-hexagon{
            grid-column:damage-start / damage-end;
          }
        }
      }
      + .sheet-image-border{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-repeat:no-repeat;
        &.sheet-has-header.sheet-has-footer{
          background:{
            image:var(--topCorner), var(--bottomCorner);
            position:top left, bottom right;
            size:var(--cornerSize),var(--cornerSize);
          };
        }
        &.sheet-has-header:not(.sheet-has-footer){
          background:{
            image:var(--topCorner);
            position:top left;
            size:var(--cornerSize);
          };
        }
        &.sheet-has-footer:not(.sheet-has-header){
          background:{
            image:var(--bottomCorner);
            position:bottom right;
            size:var(--cornerSize);
          };
        }
      }
      .sheet-header,.sheet-footer{
        @extend %grid;
        min-height: 30px;
        align-items: center;
        grid-template-areas:'content';
        *{
          box-sizing:border-box;
          grid-area:content;
        }
      }
      .sheet-header{
        --headBorder:0 3px 3px 3px;
        --headRadius:0 0 10px 10px;
        --headItems:center start;
        --headSelf:start;
        --headMargin:0 0 10px -3px;
        --headPadding:5px 10px 10px 15px;
        grid-column:2/7;
        *{
          text-align:left;
        }
      }
      .sheet-footer{
        --headBorder:3px 3px 0 3px;
        --headRadius:10px 10px 0 0;
        --headItems:center end;
        --headSelf:end;
        --headMargin:9px -3px 0 0;
        --headPadding:15px 15px 5px 5px;
        grid-column:1/6;
        *{
          text-align:right;
        }
      }
      .sheet-background{
        @extend %grid;
        grid-template-areas: 'content';
        background-color: #aac1dd80;
        border-color:black;
        border-style: solid;
        border-color: black;
        border-width:var(--headBorder);
        border-radius:var(--headRadius);
        place-items:var(--headPlace);
        margin:var(--headMargin);
        place-self:var(--headSelf);
        padding:var(--headPadding);
        box-sizing:border-box;
        backdrop-filter: blur(2px);
        min-width:120px;
        *{
          opacity:0;
        }
      }
      .sheet-header__content{
        @extend %grid;
        place-self:var(--headSelf);
        grid-template-areas:'content';
        padding:var(--headPadding);
        place-items:var(--headItems);
        margin:var(--headMargin);
        border-radius:var(--headRadius);
      }
      .sheet-header__image{
        width:100%;
        height:100%;
        background:{
          image:var(--headerBottom);
          position:bottom left;
          size:calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
          repeat:no-repeat;
        };
        z-index:1;
      }
      .sheet-footer__content{
        @extend %grid;
        place-self:var(--headSelf);
        grid-template-areas:'content';
        place-items:var(--headItems);
        padding: var(--headPadding);
        margin:var(--headMargin);
        border-radius:var(--headRadius);
      }
      .sheet-footer__image{
        width:100%;
        height:100%;
        background:{
          image:var(--footerTop);
          position:top right;
          size:calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
          repeat:no-repeat;
        };
        z-index:1;
      }
      .sheet-fumble-toggle + .sheet-hexagon__hex-wrapper{
        --hexColor:#db1a1a;
      }
      .sheet-crit-toggle + .sheet-hexagon__hex-wrapper{
        --hexColor:#02a98d;
      }
      .sheet-hexagon{
        @extend %hex-base;
        --shadow:black;
        width:var(--circleSize);
        aspect-ratio: 1 / 1.1547005;
        transform:rotate(150deg);
        h4 *{
          font-family:var(--midHeaderFont);
          font-weight:normal;
        }
      }
      .sheet-hexagon__hex-wrapper{
        @extend %hex-rotate;
      }
      .sheet-hexagon__hex-wrapper__hex-border{
        @extend %hex-rotate;
        @extend %hex-shape;
        background:radial-gradient(at 150%,#585858,var(--hexColor));
        &:before{
          @extend %hex-shape;
          @extend %hex-rotate;
        }
        &:after{
          @extend %hex-shape;
          @extend %hex-component;
          transform:rotate(-120deg);
        }
      }
      .sheet-hexagon__hex-wrapper__hex-border__hex-content{
        @extend %hex-component;
        transform:rotate(-30deg);
        grid-template-columns:auto;
        grid-template-rows:auto auto;
        gap:var(--half-gap);
        place-items:center;
        place-content:center;
      }
      .sheet-roll,
      .sheet-difficulty{
        align-self:start;
      }
      .sheet-container-background{
        background-color:white;
        margin:{
          right:-10px;
          left:-10px;
          bottom: -17px;
        };
        border:{
          top:2px solid black;
          bottom:2px solid black;
        }
        &,
        + div{
          margin-top:15px;
          padding-block:5px;
        }
      }
      .sheet-description.sheet-text{
        h4{
          text-align:left;
          margin-top:var(--grid-gap);
          font-weight:700;
        }
      }
    }
		span:not(.inlinerollresult){
			font-size:13px;
		}
	}
  .sheet-roll,
  .sheet-difficulty{
    &:nth-child(even){
      grid-column:roll-start / roll-end;
    }
    &:nth-child(odd){
      grid-column:difficulty-start / difficulty-end;
    }
  }
  .sheet-damage{
    &:nth-child(even){
      grid-column:damage-start / damage-end;
    }
    &:nth-child(odd){
      grid-column:difficulty-start / difficulty-end;
    }
  }
  @each $area in header,description,footer{
    .sheet-#{$area}{
      grid-area:$area;
    }
  }
  :not(div),
  .sheet-hexagon,
  .sheet-hexagon div,
  .sheet-text,
  .sheet-description:not(.sheet-container-background){
    position:relative;
    z-index:10;
  }
	.inlinerollresult{
    font-size:1.5rem;
		&[title*="[computed value]"],
		&[original-title*="[computed value]"]{
			pointer-events: none;
		}
		&,
		&.fullcrit,
		&.fullfail,
		&.importantroll{
			border: none;
			background-color: transparent;
		}
		&.fullcrit{
			
		}
		&.fullfail{
			
		}
		&.importantroll{
			
		}
	}
  .sheet-hexagon,.sheet-circle{
		place-self:center;
    &.sheet-damage{
      justify-self:center;
    }
    :not(div){
      color:white;
    }
	}
}