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

.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.2);
      margin: 8px 0;

        label {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 48px;
          background-color: rgba(0, 0, 0, 0.1);
          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;
        }

        &:hover {
          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
        }
      }

      .pa {
        grid-area: pa;

        cursor: pointer;

        label {
          cursor: pointer;
        }

        &:hover {
          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
        }
      }

      .ini {
        grid-area: ini;
      }

      .tp {
        grid-area: tp;

      }
    }

    .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%;
          left: 0;
          bottom: 0;
          top: 0;
          border-radius: 12px;
          z-index: 2;

          &::after { // progress fill
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: 12px;
            background-color: rgba(128, 0, 192, 0.5);
          }
        }

        &::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::after {
          background-color: rgba(colors.$kampftalent-color, 0.5);
        }

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

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

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

      }
    }

  }

}