@use "../atoms/colours" as colour;
@use 'sass:color';
@use "../atoms/numbers";
@use "../molecules/equipment";

.dsa41.sheet.actor.creature {

  .window-content {

    .sheet-header {

      height: 64px;
      display: grid;
      grid-template-columns: 64px 1fr;
      grid-template-rows: 1fr;
      gap: 0 8px;
      margin-bottom: 8px;

      img {
        width: 64px;
        height: 64px;
      }

      input {
        line-height: 64px;
        height: 64px;
        font-size: 2rem;

      }

    }

    div.input {

      height: 32px;
      display: grid;
      grid-template-columns: 120px 1fr;

      &.compound {

        grid-template-columns: 120px 140px 1fr;

        span {
          width: 120px;
        }


        input {
          width: 100px;
        }

      }

      label {
        height: 32px;
        width: 100%;

        span {
          width: 120px;
          text-align: left;
          line-height: 32px;
          vertical-align: middle;
          display: inline-block;
        }

        input {
          text-align: right;
          line-height: 32px;
          vertical-align: middle;
          padding-left: 120px;
          display: inline-block;
        }

      }

    }

    table.attacks-table {

      margin: 0;

      td {
        padding: 2px 4px;
      }
    }

    .rollable.tablecell {
      position: relative;


      .attacks-die {
        width: 24px;
        height: 24px;
        position: absolute;
        left: 4px;
        top: 4px;
        bottom: 2px;
        z-index: 1;


        svg {
          stroke-width: 0.5;

          $color: #f30;

          .border {
            fill: #0000;
          }

          .center {
            fill: $color;
            stroke: colour.$rollable-die-border-color;
          }

          .topleft {
            fill: color.adjust($color, $lightness: numbers.$lighter_factor);
            stroke: colour.$rollable-die-border-color;
          }

          .bottomleft {
            fill: color.adjust($color, $lightness: numbers.$lightest_factor);
            stroke: colour.$rollable-die-border-color;
          }

          .topright {
            fill: color.adjust($color, $lightness: numbers.$darken_factor);
            stroke: colour.$rollable-die-border-color;
          }

          .bottomright, .bottom {
            fill: color.adjust($color, $lightness: numbers.$darkest_factor);
            stroke: colour.$rollable-die-border-color;
          }
        }


      }

      input {
        position: absolute;
        left: 16px;
        top: 4px;
        bottom: 2px;
        right: 4px;
        width: unset;
        text-indent: 12px;
      }
    }

    .button-inline {
      border: unset;
      background: unset;
    }

    .editor {
      height: 100%;
    }

    .tab.active {
      padding: 8px;
    }

    .tab.attacks.active {
      padding: 16px;
    }

    .tab.loot {

      div {
        .equipment {
          @include equipment.equipment(false)
        }
      }

    }

  }
}

.theme-dark {

  .dsa41.sheet.actor.creature {

    .tab.loot {

      div .equipment {
        @include equipment.equipment(true)
      }

    }

  }

}