@use "_colours" as colour;
@use 'sass:color';
@use "_numbers";

.dsa41.sheet.actor.creature {

  .window-content {

    form {

      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 74px 30px 1fr;

      .sheet-header {

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

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

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

        }

      }

      .sheet-body {
        .tab {
          margin: 8px;

          height: 100%;

          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 {

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

        }
      }

    }
  }

}