@use "sass:color";
@use "../atoms/numbers";
@use "../atoms/colours" as colour;
@use "./character-tabs/meta";
@use "./character-tabs/social";
@use "./character-tabs/advsf";
@use "./character-tabs/inventory";
@use "./character-tabs/health";
@use "./character-tabs/spells";
@use "./character-tabs/liturgies";
@use "./character-tabs/skills";
@use "../atoms/buttons";

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

      .rkp {
        overflow: hidden;
        padding-bottom: 6px;
        text-wrap: nowrap;

        .pill {
          @include buttons.pill-button;
        }

      }

    }

    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.advsf.active {
      @include advsf.tab;
    }

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

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

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

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

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

    .sidebuttons {
      display: none;
    }
  }

  &.tiny:not(.minimized):not(.minimizing) {

    .header-fields {
      & > div:not(.attributes) {
        display: none;
      }

      & > div.attributes {
        position: absolute;
        left: -8px;
        top: -8px;
        right: -8px;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(4, 1fr);
      }

    }

    div.head-data {
      width: unset;
      top: 136px;
      left: 8px;
      right: 8px;
      bottom: 8px;

      .profile-img {
        justify-self: center;
      }
    }

    .sheet-tabs {
      display: none;
    }

    section.tab.tab.tab {
      display: none;
    }

    .sidebuttons {
      position: fixed;
      display: block;
      margin-left: 27px;
      margin-top: 48px;
      pointer-events: none;
      rotate: 90deg;
      transform-origin: top left;

      div {
        display: flex;
        gap: 4px;

        button {
          background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
          background-repeat: repeat-y;
          background-size: cover;
          color: white;
          font-weight: bold;
          pointer-events: all;
          border-radius: 0;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
      }
    }
  }

}

.theme-dark {

  .application.sheet.dsa41.actor.character {

    .tab.meta.active {
      @include meta.tab(true);
    }

    .tab.social.active {
      @include social.tab(true);
    }

    .tab.advsf.active {
      @include advsf.tab(true);
    }

    .tab.equipment.active {
      @include inventory.tab(true);
    }

    .tab.health.active {
      @include health.tab(true);
    }

    .tab.skills.active {
      @include skills.tab(true);
    }

    .tab.spells {
      @include spells.tab(true);
    }

    .tab.liturgies {
      @include liturgies.tab(true);
    }


  }

}