@import "rolltemplate.less";

.charsheet {
  background: #fff;
  height: 100%;
  width: 9in;

  @import "fields.less";

  .column {
    display: inline-block;
  }

  .inlineBlock {
    display: inline-block;
  }

  .attributes {
    margin-bottom: 32px;
    width: 100%;

    .attribute {
      position: relative;

      button {
        height: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 40%;
        z-index: 10;
      }

      & > label {
        position: absolute;
        left: 55%;
        top: 15%;
        width: auto;

        &::before {
          content: "0";
          font-family: dicefontd10;
          font-size: 32px;
          vertical-align: middle;
        }
      }
    }

    .column {
      vertical-align: top;
      width: 33%;
    }
  }

  .attrsHeader {
    margin-bottom: 10px;

    h2 {
      display: inline-block;
      line-height: 1em;
      max-width: 2in;
      vertical-align: middle;
    }

    .boxedIcon {
      display: inline-block;
      height: 60px;
      vertical-align: middle;
      width: 60px;

      &.iconChassis {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconChassis.png");
      }

      &.iconCrux {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconCrux.png");
      }

      &.iconIntelligence {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconIntelligence.png");
      }

      &.iconMovement {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconMovement.png");
      }

      &.iconPhysicalInteraction {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconPhysicalInteraction.png");
      }

      &.iconThresholds {
        background: url("https://raw.githubusercontent.com/Cazra/roll20-character-sheets/engineHeart/EngineHeart/img/iconThresholds.png");
      }
    }
  }

  .featuresDefects {
    margin-bottom: 32px;

    table {
      font-size: 10px;
      margin-left: 8px;
      width: 100%;

      th:nth-child(1) {
        width: 30%;
      }

      th:nth-child(2) {
        width: 10%;
      }
    }

    .feature, .defect {
      input {
        border-bottom: solid 1px black;
        border-radius: 0;
        padding: 0;
        vertical-align: top;
      }

      textarea {
        height: 1.5em;
        margin-top: 1px;
        resize: vertical;
        vertical-align: top;
      }

      input:nth-child(1) {
        width: 30%;
      }

      input:nth-child(2) {
        width: 10%;
      }

      textarea:nth-child(3) {
        width: 55%;
      }
    }
  }

  .secondaryAttrs {
    margin-bottom: 32px;
    width: 100%;

    .attribute {
      position: relative;

      & > label {
        position: absolute;
        left: 55%;
        margin-left: 1.7em;
        text-indent: -1.7em;
        top: 15%;
        width: auto;
      }

      &.threshold {
        & > label {
          left: 37%;
        }
      }
    }

    .column {
      vertical-align: top;
      width: 33%;
    }

    .rollable {
      position: relative;

      button {
        height: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 40%;
        z-index: 10;
      }

      .attribute {
        & > label::before {
          content: "0";
          font-family: dicefontd10;
          font-size: 32px;
          vertical-align: middle;
        }
      }
    }
  }

  .top {
    width: 100%;

    .column.bio {
      width: 80%;

      & > div {
        width: 100%;

        .labelledLeft {
          display: inline-table;

          label {
            display: table-cell;
            white-space: nowrap;
            width: 1px;
          }

          .inner {
            display: table-cell;

            input {
              width: 100%;
            }
          }
        }
      }
    }
    .column.points {
      margin-left: 20px;
      transform: scale(1.5);
      width: 10%;
    }
  }

  .twoColumns {
    .column {
      vertical-align: top;
      width: 49%;
    }
  }
}