@use "sass:map";
@use "sass:color";
@use "../atoms/colours" as colour;
@use "../atoms/numbers";

$deity_colours_border: (
        "Praios": orange,
        "Rondra": red,
        "Efferd": #74d0ec,
        "Travia": #c6491a,
        "Boron": #515151,
        "Hesinde": #089e08,
        "Firun": #8fdeff,
        "Tsa": #6a24d8,
        "Phex": #1569da,
        "Peraine": #56a116,
        "Ingerimm": #a53d19,
        "Rahja": #ed70c2,
);
$deity_colours_tint: (
        "Praios": rgba(orange, 0.5),
        "Rondra": rgba(red, 0.5),
        "Efferd": rgba(#74d0ec, 0.5),
        "Travia": rgba(#c6491a, 0.5),
        "Boron": rgba(#515151, 0.5),
        "Hesinde": rgba(#089e08, 0.5),
        "Firun": rgba(#8fdeff, 0.5),
        "Tsa": linear-gradient(
                        -45deg,
                        rgba(255, 0, 0, 0.5) 0%,
                        rgba(255, 154, 0, 0.5) 10%,
                        rgba(208, 222, 33, 0.5) 20%,
                        rgba(79, 220, 74, 0.5) 30%,
                        rgba(63, 218, 216, 0.5) 40%,
                        rgba(47, 201, 226, 0.5) 50%,
                        rgba(28, 127, 238, 0.5) 60%,
                        rgba(95, 21, 242, 0.5) 70%,
                        rgba(186, 12, 248, 0.5) 80%,
                        rgba(251, 7, 217, 0.5) 90%,
                        rgba(255, 0, 0, 0.5) 100%
        ),
        "Phex": rgba(#1569da, 0.5),
        "Peraine": rgba(#56a116, 0.5),
        "Ingerimm": rgba(#a53d19, 0.5),
        "Rahja": rgba(#ed70c2, 0.5),
);

@mixin coloring($name) {
  $color: map.get($deity_colours_border, $name);
  $color-tint: map.get($deity_colours_tint, $name);
  &.#{$name} {

    th.background {
      &::after {
        background: $color-tint;
      }
    }

    .banner-bot {
      border-color: $color;
    }

    .banner-mid {
      border-color: $color;
    }

    .banner-top {
      &::before, &::after {
        border-color: $color;
      }
    }
  }
}

.dsa41.sheet {

  .tab.liturgies {
    table {

      @include coloring('Praios');
      @include coloring('Rondra');
      @include coloring('Efferd');
      @include coloring('Travia');
      @include coloring('Boron');
      @include coloring('Hesinde');
      @include coloring('Firun');
      @include coloring('Tsa');
      @include coloring('Phex');
      @include coloring('Peraine');
      @include coloring('Ingerimm');
      @include coloring('Rahja');

      tr {

        background-color: unset;

        th.background {

          &::before {
            position: absolute;
            content: '';
            background-image: url("/systems/DSA_4-1/assets/velvet_strip.png");
            background-repeat: repeat-y;
            background-size: cover;
            width: 86px;
            height: 100%;

            top: 45px;
            left: 28px;
          }

          &::after { /* for tinting the texture */
            content: "";
            position: absolute;
            width: 86px;
            height: 100%;

            top: 45px;
            left: 28px;
          }
        }
      }

      .banner-top {
        position: relative;

        width: 90px;

        img {
          position: absolute;
          top: 2px;
          left: 1px;
          width: 90px;
          height: 90px;
          border: 0;
          z-index: 1;
        }

        &::after {
          z-index: 0;
          border-width: 0 4px 0 4px;
          //background-color: #64b;
          border-style: solid;
          position: absolute;
          content: "";
          left: -2px;
          top: 45px;
          bottom: 0;
          width: 94px;
        }

        &::before {
          position: absolute;
          border-radius: 45px;
          height: 94px;
          width: 94px;
          content: '';
          left: -2px;
          right: -2px;
          top: 0;
          border-width: 4px;
          border-style: solid;
          z-index: 2;
        }
      }

      .banner-mid {
        position: relative;
        border-width: 0 4px 0 4px;
        //background-color: #64b;
        border-style: solid;
        width: 90px;

        div {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;

          div.rank-label {
            position: absolute;
            left: 2px;
            right: 2px;
            top: 0;
            bottom: 0;
            border-bottom: 2px solid black;
            color: gold;
            text-shadow: 2px 2px 1px black;
          }
        }
      }

      .banner-bot {
        position: relative;
        border-width: 4px;
        border-style: solid;
        width: 90px;
        height: 12px;
      }
    }

    .liturgy.rollable {
      width: 24px;
      padding: 0;

      svg {

        $color: colour.$liturgie-color;
        width: 32px;
        height: 32px;
        top: 1px;
        z-index: 1;
        position: relative;

        path {
          fill: $color;
        }
      }

      &:hover {
        @include colour.svg-highlight;
      }
    }

    .clickable {
      @include colour.highlight;
    }

  }

}