@use "../atoms/colours";
@use "../atoms/numbers";

.application.sheet.dsa41.item.equipment {

  .tab.meta.active > div {

    display: grid;
    grid-auto-columns: 1fr 1fr;
    grid-template-columns: 80px auto;
    grid-template-rows: 48px auto 48px;
    gap: 8px;
    grid-template-areas:
    "quantity name"
    "description description"
    "bottomline bottomline";

    .name {
      grid-area: name;
    }

    .name {
      position: relative;

      .img {
        position: absolute;
        right: 0;
        bottom: 6px;
        width: 24px;
        height: 24px;
      }

      label {
        position: absolute;
        left: 0;
        top: 0;
        right: 26px;
        bottom: 0;
      }
    }

    .bottomline {
      grid-area: bottomline;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;

      .named-value {
        position: relative;
        height: 48px;

        label {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 80px;
          line-height: 24px;
          vertical-align: middle;

          input {
            position: absolute;
            left: 80px;
            top: 0;
            bottom: 0;
            right: 0;
          }
        }
      }


    }

    .quantity {
      grid-area: quantity;
    }

    .description {
      grid-area: description;
      position: relative;
      display: flex;
      flex-direction: column;

      label {
        flex: 0;
      }

      .editor {
        flex: 1;
      }
    }

  }

  .tab.melee.active > div {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 48px auto 48px 48px;
    gap: 8px;
    grid-template-areas:
    "tp tpbonus"
    "applicableSkills applicableSkills"
    "initiativeMod breakFactor"
    "atMod paMod";

    .tp {
      grid-area: tp;
    }

    .tp-bonus {
      grid-area: tpbonus;
      display: grid;
      grid-template-rows: 16px 1fr;
      gap: 4px;
      grid-template-areas: "label label" "tp kk";
      label {
        grid-area: label;
        text-align: center;
      }
    }

    .applicable-skills {
      grid-area: applicableSkills;

      .array-editor {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 24px;

        ul {
          flex: 1 0;
        }
      }
    }

    .initiative-modifier {
      grid-area: initiativeMod;
    }

    .breakfactor {
      grid-area: breakFactor;
    }

    .at-mod {
      grid-area: atMod;
    }

    .pa-mod {
      grid-area: paMod;
    }

  }

  .tab.armor.active > div {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 48px auto 48px 48px;
    gap: 8px;
    grid-template-areas:
    "head head chest chest"
    "back back belly belly"
    "leftArm leftArm rightArm rightArm"
    "leftLeg leftLeg rightLeg rightLeg"
    "totalArmor totalHandicap iniMod breakFactor"
    "atMod atMod paMod paMod";

    .head {
      grid-area: head;
    }

    .chest {
      grid-area: chest;
    }

    .back {
      grid-area: back;
    }

    .belly {
      grid-area: belly;
    }

    .left-arm {
      grid-area: leftArm;
    }

    .right-arm {
      grid-area: rightArm;
    }

    .left-leg {
      grid-area: leftLeg;
    }

    .right-leg {
      grid-area: rightLeg;
    }

    .total {
      grid-area: totalArmor;
    }

    .handicap {
      grid-area: totalHandicap;
    }

    .initiative-modifier {
      grid-area: iniMod;
    }

    .break-factor {
      grid-area: breakFactor;
    }

    .at-mod {
      grid-area: atMod;
    }

    .pa-mod {
      grid-area: paMod;
    }

  }
}
