@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: 8px;

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

      }
    }

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



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

    }
  }
}