@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;

        .equipment {
          height: 32px;
        }
      }

      .equipment:hover {
        .item-name {
          text-shadow: 0 0 10px rgb(255 0 0);
        }
      }
    }
  }
}