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

@mixin tab {

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

    .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: linear-gradient(to bottom, #0bad29 0%, #11f128 50%, #0cde24 51%, #6ff77b 100%);
        }

      }
    }

    .inventory {
      grid-area: inventory;
      display: flex;
      flex-direction: column;

      h3 {
        flex: 0;
      }

      .inventory-table {
        flex: 1;
        display: flex;
        flex-direction: column;

        .equipment {
          @include equipment.equipment
        }
      }
    }
  }
}