@use 'k-scaffold' as k;
@use './variables';
@use './components';
@use './sections';


html {
  // Specify the base font size of the sheet
  // This affects what 1rem is equal to as well as what the inherited font sizes are.
  font-size: 16px;
}
body{
  @include variables.all;
  // While these SHOULD be inherited from the html, we need to override some Roll20 styling
  color: var(--fontColor);
  font-size: 1rem;
  .ui-dialog{
    .nav-tabs {
      // Apply positioning to the Roll20 sheet nav bar so the 
      // nav bar sticks to the top of the sheet.
      // Remove the next 4 lines if you don't want this behavior
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color:var(--backColor);
      a{
        // extend our font selection to the Roll20 interface
        font-family:var(--font3);
      }
    }
    .tab-content{
      .charsheet{
        // Include the default k-scaffold styles, including the Roll20Clear. This also ensures all of our elements are setup to inherit style properties where possible.
        @include k.defaultStyles;
        // Include the styles for each of our components and sections. Note that sections are listed last so that they override the component styles if necessary.
        @include components.all;
        @include sections.all;
        // Do any other generic styling that you need for your project
      }
    }
  }
  &.sheet-darkmode{
    @include variables.dark;
  }
}