@use "sass:color";
@use "../atoms/numbers";
@use "../atoms/colours" as colour;
@use "./character-tabs/meta";
@use "./character-tabs/social";
@use "./character-tabs/attributes";
@use "./character-tabs/inventory";
@use "./character-tabs/combat";
@use "./character-tabs/spells";
@use "./character-tabs/liturgies";



.application.sheet.dsa41.actor.character {

  $sidebar-width: 224px;
  $attribute-height: 60px;
  $tabs-spacing: 14px;
  $tabs-height: 26px;

  .window-content {
    display: unset; /* we are on our own */
    position: relative;

    .header-fields {
      position: absolute;
      top: 0;
      left: 0;
      height: $attribute-height;
      right: 0;
      display: grid;
      grid-template-columns: 1fr max-content;
      gap: 0 8px;

      .name {
        border: unset;
        font-size: large;
      }

    }

    div.head-data {
      position: absolute;
      left: 16px;
      top: $attribute-height+30px;
      width: $sidebar-width - 16px;
      bottom: 16px;
      padding: 0;


      .profile-img {
        width: $sidebar-width - 16px;
      }
    }

    nav.sheet-tabs.tabs {
      position: absolute;
      left: $sidebar-width+16px;
      top: $attribute-height+$tabs-spacing+13px;
      right: 16px;
      height: $tabs-height;
    }

    section.tab {
      position: absolute;
      top: $attribute-height+$tabs-height+$tabs-spacing+21px;
      left: $sidebar-width+16px;
      right: 16px;
      bottom: 16px;
      padding: 0;
      overflow: auto;
    }

    .tab.meta.active {
      @include meta.tab;
    }

    .tab.social.active {
      @include social.tab;
    }

    .tab.attributes.active {
      @include attributes.tab;
    }

    .inventory.active {
      @include inventory.tab;
    }


    .tab.combat.active {
      @include combat.tab;
    }

    .tab.spells {
      @include spells.tab;
    }

    .tab.liturgies {
      @include liturgies.tab;
    }

  }

}