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

    }

}
