@use "../../atoms/assets";
@use "../../molecules/equipment";

@mixin tab($darkmode: false) {

  & > div {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: 32px 32px 32px 1fr;
    gap: 10px;
    height: 100%;
    grid-template-areas:
"capacity capacity"
"coinage coinage"
"inventory-header equipment-header"
"inventory equipment";

    .coinage {
      grid-area: coinage;
    }

    .capacity {

      grid-area: capacity;

      .resource {

        position: relative;
        border: 1px inset #ccc;
        background-color: rgba(0, 0, 0, 0.2);
        height: 16px;

        span.fill {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background: url('/systems/DSA_4-1/assets/gradient.png');
          background-size: 8px 100%;

          &:after {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 128, 0, 0.5);
            content: '';
          }

          &.danger::after {
            background-color: rgba(224, 60, 20, 0.5);
          }
        }

      }
    }

    .inventory-header {
      line-height: 32px;
      grid-area: inventory-header;
      margin: 0;
      padding: 0;
      display: flex;

      h3 {
        flex: 1;
        line-height: 32px;
      }

      .buttons {
        flex: 0;
        display: flex;
        gap: 4px;

        button {

        }
      }


    }



    .inventory {
      grid-area: inventory;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px inset #ccc;
      background-color: rgba(0, 0, 0, 0.2);


      .equipment {
        @include equipment.equipment($darkmode)
      }

    }

    h3.equipment-header {
      line-height: 32px;
      grid-area: equipment-header;
      margin: 0;
      padding: 0;
    }

    .set {
      grid-area: equipment;
      margin: 0;
      padding: 0;
    }
  }
}

.dsa41.sheet.actor.character.standalone.bagpack {
  @include tab;


  .coinage {
    position: absolute;
    bottom: 0;
    right: 8px;
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
  }

  .capacity {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .buttons {
    position: absolute;
    bottom: 4px;
    left: 4px;

    button {
      display: inline-block;
    }

  }

  .inventory-table {
    overflow-x: hidden;
    overflow-y: auto;

    position: absolute;
    left: 4px;
    top: 4px;
    right: 4px;
    bottom: 38px;

    .equipment {
      @include equipment.equipment
    }

  }
}