@use "../atoms/colours" as colors;
@use "sass:color";
@use "../atoms/buttons";

.dsa41.sheet.actor.character {

  .head-data {

    .resource-bar {

      height: 24px;
      width: 100%;
        position: relative;
        border: 1px inset #ccc;
      background-color: rgba(0, 0, 0, 0.5);
      margin: 8px 0;

        label {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          z-index: 3;
          line-height: 24px;
          vertical-align: middle;
          text-indent: 8px;
          color: white;
          text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
        }

        span.resource-fill {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background: url('/systems/DSA_4-1/assets/gradient.png');
          background-size: 32px 100%;

          &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }

          &.lep::after {
            background-color: rgba(192, 0, 0, 0.5);
          }

          &.aup::after {
            background-color: rgba(192, 166, 0, 0.5);
          }

          &.asp::after {
            background-color: rgba(0, 26, 192, 0.5);
          }

          &.kap::after {
            background-color: rgba(128, 0, 192, 0.5);
          }
        }


      }

    .button {

      margin-bottom: 8px;

    }

    .attack {

      display: grid;
      grid-template-columns: 32px  32px 1fr 1fr;
      grid-template-rows: 18px 30px;
      grid-template-areas: "name name name name" "at pa tp ini";
      height: 64px;
      border: 1px inset #ccc;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
      padding: 8px;
      margin-bottom: 8px;
      gap: 0;

      h3 {
        grid-area: name;
        text-align: center;
      }

      label {
        font-size: smaller;
        display: block;
        text-align: center;
      }

      .formula {
        font-size: small;
        display: block;
        text-align: center;
      }

      .at {
        grid-area: at;

        cursor: pointer;

        label {
          cursor: pointer;
        }

        @include colors.highlight;
      }

      .pa {
        grid-area: pa;

        cursor: pointer;

        label {
          cursor: pointer;
        }

        @include colors.highlight;
      }

      .ini {
        grid-area: ini;
        cursor: pointer;

        label {
          cursor: pointer;
        }

        @include colors.highlight;
      }

      .tp {
        grid-area: tp;
        cursor: pointer;

        label {
          cursor: pointer;
        }

        @include colors.highlight;
      }
    }

    .favourites {

      h3 {
        text-align: center;
        margin: 8px 0;
      }

      .mini-skill, .mini-weaponskill, .mini-language-skill, .mini-spell, .mini-liturgy {
        margin-bottom: 4px;


        @include colors.highlight;
      }

      .mini-skill.Körperlich {
        @include buttons.mini-button($color: color.scale(colors.$talent-body-color, $lightness: -50%), $button-color: gold);
      }

      .mini-skill.Gesellschaft {
        @include buttons.mini-button($color: color.scale(colors.$talent-social-color, $lightness: -50%), $button-color: gold);
      }

      .mini-skill.Natur {
        @include buttons.mini-button($color: color.scale(colors.$talent-nature-color, $lightness: -50%), $button-color: gold);
      }

      .mini-skill.Wissen {
        @include buttons.mini-button($color: color.scale(colors.$talent-knowledge-color, $lightness: -50%), $button-color: gold);
      }

      .mini-skill.Handwerk {
        @include buttons.mini-button($color: color.scale(colors.$talent-crafting-color, $lightness: -50%), $button-color: gold);
      }

      .mini-weaponskill {
        @include buttons.mini-button($color: color.scale(colors.$kampftalent-color, $lightness: -50%), $button-color: gold);
      }

      .mini-language-skill {
        @include buttons.mini-button($color: color.scale(colors.$talent-language-color, $lightness: -50%), $button-color: gold);
      }

      .mini-spell {
        @include buttons.mini-button($color: colors.$zauber-color, $button-color: gold);
      }

      .mini-liturgy {
        @include buttons.mini-button($color: colors.$liturgie-color, $button-color: gold);
      }

    }

    .cooldowns {

      h3 {
        text-align: center;
        margin: 8px 0;
      }

      .cooldown {
        display: grid;
        position: relative;
        height: 24px;
        width: 100%;

        grid-template-columns: 24px 1fr 24px;
        grid-template-rows: 24px;
        grid-template-areas: "btn-left text btn-right";
        border: 1px inset #ccc;
        border-radius: 12px;

        background: url('/systems/DSA_4-1/assets/gradient.png');

        .btn-left {
          grid-area: btn-left;
          color: white;

          i {
            vertical-align: 1px;
          }
        }

        .btn-right {
          grid-area: btn-right;
          color: white;
        }

        .btn-left, .btn-right {
          z-index: 3;
          vertical-align: middle;
          min-height: 16px;
          height: 24px;
          width: 24px;
          margin: 0;
          padding: 0;
          background: unset;
          background-color: unset;
          box-shadow: unset;
          border-radius: 12px;
          display: block;
          border: unset;
        }

        span {
          grid-area: text;
          z-index: 3;
          height: 24px;
          line-height: 24px;
          vertical-align: middle;
          color: white;
          text-align: center;
          text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
          overflow: hidden;
        }

        .progress {
          position: absolute;
          background: url('/systems/DSA_4-1/assets/gradient.png');
          background-size: 12px 100%;
          background-blend-mode: overlay;
          background-color: rgba(128, 0, 192, 1);
          left: 0;
          bottom: 0;
          top: 0;
          border-radius: 12px;
          z-index: 2;
        }

        &::after {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          border-radius: 12px;
          background-color: rgba(0, 0, 0, 0.8);
        }


        &.Kampf .progress {
          background-color: rgba(colors.$kampftalent-color, 1);
        }

        &.Karmal .progress {
          background-color: rgba(colors.$liturgie-color, 1);
        }

        &.Magisch .progress {
          background-color: rgba(colors.$zauber-color, 1);
        }

        &.Talent .progress {
          background-color: rgba(colors.$talent-color, 1);
        }

      }
    }

  }

}