@forward '_genericplaceholders.scss';
@mixin activeTab{
  --tabBorder:drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
  top:1px;
  color:black;
}
.ui-dialog .tab-content .charsheet{
  *[data-i18n='xp']{
    text-transform:uppercase;
  }
  .stat-grid{
    gap:var(--half-gap) var(--tiny-gap);
    > :not(input):not(h2){
      place-self:center end;
    }
  }
  .boxed.span-2{
    @extend %grid;
    grid-auto-flow: column;
    place-content:center;
    width:6.5rem;
  }
  .roll-plus{
    justify-self: center;
  }
  .health-track{
    .repcontainer{
      @extend %grid;
      grid-template-columns:repeat(auto-fill,2rem);
      row-gap:var(--tiny-gap);
      &:hover{
        .health-track__clearer{
          background-image:linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px));
        }
      }
      > .repitem{
        @extend %grid;
        grid-template:{
          columns:2rem;
          rows:repeat(2,2rem);
          areas:
            'check'
            'penalty'
          ;
        }
        &:first-child{
          .itemcontrol{
            display:none !important;
          }
        }
        .repcontrol_move{
          display:none !important;
        }
      }
    }
    .repcontrol{
      display:none;
    }
  }
  .health-track__max-control[value="1"] ~ .repcontrol .repcontrol_edit{
    display:none;
  }
  .health-track__number{
    &:is(:hover,:focus){
      border-radius:0;
    }
  }
  .health-track__checkbox{
    border-radius:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    grid-area:check;
  }
  .health-track__clear-control:not(:checked) ~ .health-track__clearer{
    display:none;
  }
  .health-track__fill-control{
    &:checked + *{
      @extend %checked;
    }
  }
  .health-track__clearer{
    grid-area:check;
    button{
      width:100%;
      height:100%;
    }
  }
}
%hex-base{
  @extend %grid;
  overflow:hidden;
  grid-template-areas:'content';
}
%hex-component{
  @extend %hex-base;
  width:100%;
  height:100%;
  grid-area:content;
}
%hex-rotate{
  @extend %hex-component;
  transform:rotate(-60deg);
}
%hex-shape{
  box-sizing:border-box;
  content:'';
  box-shadow:0 0 0 1px black inset, 0 0 4px #ffffff inset;
}
%article-layout{
  @extend %grid;
  gap:var(--big-gap);
  &.system-remnant{
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  }
}
%repeat-section-layout{
  @extend %grid;
  grid-template-areas:"header";
  gap:var(--half-gap);
  align-self:start;
}
// End Placeholders