@use "./_colours";
@use "./_numbers";

.app.window-app.dsa41.sheet.item.equipment {

  .sheet-body {

    position: relative;

    .tab.active {
      padding: 4px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .tab.meta.active {

      position: absolute;
      display: grid;
      grid-auto-columns: 1fr 1fr;
      grid-template-columns: 80px auto;
      grid-template-rows: 24px 48px auto 48px;
      gap: 0 0;
      grid-template-areas:
    "category category"
    "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);

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


      }

      .category {
        grid-area: category;
        position: relative;

        label {
          line-height: 24px;
          vertical-align: middle;


        }

        .array-editor {
          position: absolute;
          right: 0;
          left: 80px;
          top: 0;
          bottom: 0;

          ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-indent: 0;

            li {
              display: inline-block;
              border: 1px solid #333;
              background-color: rgba(255, 255, 255, 0.2);
              border-radius: 12px;
              line-height: 24px;
              vertical-align: middle;
              padding: 0 8px;
              box-shadow: numbers.$pill-box-inset numbers.$pill-box-inset numbers.$pill-box-blur-radius colours.$pill-box-shadow;
            }
          }

          select {
            position: absolute;
            right: 0;
            top: 0;
          }
        }

      }

      .quantity {
        grid-area: quantity;
      }

      .description {
        grid-area: description;
        position: relative;

        label {
          height: 14px;
        }

        .editor {
          position: absolute;
          top: 14px;
          left: 0;
          right: 0;
          bottom: 0;
          border-bottom: 1px inset #333;
        }
      }

    }


  }

}