@import '../../styles/card-constants.scss';

/* These are too vague to be easily graspable.... */
$padding: 12pt;
$top-padding: 0.19in;
$tiny: 2pt;
$thin: 0.8pt;
$border-weight: 1.1pt; /* note that this also needs to be changed in banner SVG files */

$footer-height: 0.4in;

$text-color-white: #fff;

#renderer.BlackAndWhite {

  strong {
    font-family: $font-header;
  }

  .tier {
    font-family: $font-header;
  }

  .white-background {
    background: white;
    display: inline-block;
  }

  .hp-tracker-vertical-left {

    list-style: none;
    text-align: right;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0.21in;
    left: $border;
    z-index: 99;
    font-size: $text-size-content;

    &.countdown {
      top: 0.17in;
    }

    li {
      line-height: 1;
      padding-bottom: 4.3pt;
    }
  }

  .hp-tracker-vertical-right {

    list-style: none;
    text-align: right;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.27in;
    right: $border;
    z-index: 99;
    font-size: $text-size-content;

    li {
      line-height: 1;
      padding-bottom: 4.3pt;
    }
  }

  .hp-tracker-horizontal, .counter-horizontal {

    list-style: none;
    display: block;
    margin: 0;
    padding: 0 10pt 0.03in 10pt;
    position: absolute;
    right: $border;
    bottom: 0.1in;
    font-size: $text-size-content;
    text-align: center;

    td {
      padding: 0.05in;
    }
  }

  .counter-horizontal {
    margin: auto;
    padding: 0;
    left: 0;
    right: 0;
    bottom: -0.1in;

    span {
      padding: 0 0.05in;
      display: inline-block;
    }
  }

  .adventurer-hp-tracker {

    font-size: $text-size-content;
    font-family: $font-body;
    list-style: none;
    text-align: right;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: $border;
    z-index: 99;
    font-size: $text-size-content;

    li {
      line-height: 1;
      padding-bottom: 4.3pt;
    }
  }


  /* ===== THE CARDS ===== */

  .card {

    border: $border solid black;
    border-radius: $border * 2;
    font-family: $font-body;

    .contents {
      top: 0 !important;
      left: 0 !important;
      margin-left: 0;
      margin-top: -$border;
    }

    .expansionIcon {
      position: absolute;
      bottom: $edge;
      right: -0.5pt;
      opacity: 0.6;
    }

    header {

      position: relative;
      margin: $top-padding $edge 3pt $edge;

      .name {
        font-size: $text-size-front-title;
        font-family: $font-header;
        font-weight: 700;
        letter-spacing: -0.5pt;
        line-height: 1.15;
      }

      .health {

        position: absolute;
        top: 0.03in;
        right: 0;

        .svg {
          margin: 0;
          padding-left: 0.04in;
          margin-top: 0.04in;
          margin-bottom: -0.04in;
        }
      }
    }


    article {

      position: relative;
      clear: left;
      margin: 0 $edge $edge $edge;
      padding-top: 4pt;
      line-height: 1.2;

      .indicators {
        /* fixed height for this box for consistent card layout */
        height: .5in;
        font-weight: bold;
        text-align: center;
      }

      .abilitytext {

        display: table;
        height: 1.65in;
        width: 100%;

        .child {
          display: table-cell;
          vertical-align: middle;
        }
      }

      br {
        display: block;
        content: "";

        &.padded {
          margin: 7px 0;
        }
      }
    }

    footer {

      position: absolute;
      left: $edge; bottom: $border; right: $edge;
      height: $footer-height;
      text-align: left;

      .flavortext {
        font-style: italic;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
      }
    }

    &.horizontal {

      &.front .contents {
        margin-top: -$border/2;
        margin-left: -$border/2;
      }
      &.back .contents {
        margin-top: 0;
        margin-left: 0;
      }

      header {
        padding-left: 16pt;
        padding-right: 16pt;
      }

      article {
        padding-left: 16pt;
        padding-right: 16pt;
      }

      footer {
        border-right: none;
        bottom: 0.25in;
        right: 0.315in;
        left: 16pt;
      }
    }

    &.dark {

      border-color: $text-color-white;
      background-color: $text-color;
      color: $text-color-white;

      svg {
        fill: $text-color-white;
        stroke: $text-color-white;

        * {
          fill: $text-color-white !important;
          stroke: $text-color-white !important;
        }
      }
    }

    &.Ability {

      header {

        padding: 0;
        text-align: center;

        .typeicon {

          position: absolute;
          left: -3pt;
          top: -2pt;

          svg {
            height: 1.3 * $icon-width;
            width: 1.3 * $icon-width;
          }
        }

        .classicon {

          position: absolute;
          right: -4pt;
          top: -2pt;

          svg {
            height: 1.3 * $icon-width;
            width: 1.3 * $icon-width;
          }
        }

        .name {
          padding-left: 20pt;
          padding-right: 19pt;
        }
      }

      article {

        .preamble {
          min-height: 0.65in;
          text-align: center;
        }

        .rng {
          min-height: 0.65in;
        }
      }

      footer {
        text-align: center;
      }
    }

    &.Loot {
      .abilitytext {
        height: auto;
        min-height: 0.4in;
      }

      .rng {
        min-height: 0.65in;
        text-align: left;
      }
    }

    &.Helper {

      article {
        padding-top: 0.2in;
      }

      .inline_icon {

        height: 1.4 * $icon-width;
        line-height: 1.4 * $icon-width;
        margin-top: 0.055in;
        margin-bottom: -0.055in;

        .svg {
          height: 1.4 * $icon-width;
        }
      }

      .item {
        margin-top: 0.025in;
      }

      br {
        display: block;
        margin: 0;
        padding: 0;
        height: 0.08in;
        line-height: 0in;
        content: "";
      }
    }

    /* Cards with trackers */
    &.Adventurer, &.Encounter, &.Loot {

      .flavortext {
        padding: 0 $padding;
      }

      &.bottomBar .flavortext {
        padding-bottom: 0.8*$padding;
      }
    }

    &.Adventurer {

      text-align: center;

      .level {
        margin-bottom: -0.2in;
      }

      .adventurertext {
        margin-top: 0.25in;
      }

      footer {
        text-align: center;
        right: 0.1in;
        left: 0.1in;
      }

      .expansionIcon {
        top: 0;
        right: 0.05in;
      }
    }

    &.Encounter {

      header {
        padding-right: 0;
      }

      article {
        .ongoing {
          margin-top: $tiny;
        }

        .surge, .death {
          padding-top: $tiny;
        }
      }

      .health, .hp-tracker {
        opacity: 0.8;
      }

      &.hp10 .hp-tracker-vertical-right li {
        padding-bottom: 0.042in;
      }

      .art {
        z-index: -1;
        position: absolute;
        top: 0.1in;
        right: 0.3in;
        width: 1.5in;
      }

      &.Horror {
        article {
          width: 35%;
        }
      }

      .expansionIcon {
        top: 0.03in;
        right: 0.51in;
        opacity: 0.7;
      }

      .artist {
        position: absolute;
        bottom: 0.09in;
        right: 0.125in;
        text-align: right;
        font-size: 50%;
        opacity: 0.75;
      }
    }

    &.Loot {

      text-align: center;

      &.tracker {

        article {
          padding: 0 0.15in;
        }

        .hp-tracker {
          opacity: 0.8;
        }

        .hp-tracker-vertical-right {
          top: 0.02in;
        }

        &.bottomBar {
          footer {
            bottom: 0.28in;
          }
        }
      }

      footer {
        text-align: center;
      }
    }

    &.Helper {
      article {
        div {
          padding-bottom: 0.02in;
        }
      }
    }

    &.Persona.front {
      .contents {
        margin: 0 !important;
      }
      article {
        padding: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;

        table {
          margin-left: 2 * $edge;
        }

        tr td {
          vertical-align: middle;
          position: relative;
        }
        tr td:first-child {
          padding: 4pt 4pt 4pt 0;
          opacity: 0.7;
          text-align: center;
          border-right: 1px solid #ccc;
        }
        tr td:nth-child(2) {
          padding-left: 4pt;
        }

        .personaMarker {
          margin: 0;
          td {
            &:before, &:after {
              content: "-";
              position: absolute;
            }
            &:before {
              left: 0;
            }
            &:after {
              left: 0.219in;
            }
          }
          &.personaMarkerTop td {
            &:before, &:after {
              top: 0.035in;
            }
          }
          &.personaMarkerBottom td {
            padding-top: 6pt;
            padding-bottom: 2pt;
            &:before, &:after {
              top: 2pt + 0.02in;
            }
          }
        }
      }

      .expansionIcon {
        position: absolute;
        bottom: 0.1in;
        right: -0.1in;
      }
    }

    &.Skill.front {
      text-align: center;

      .flavortext {
        text-align: center;
        padding-bottom: 0.8*$padding;
      }

      .level {
        span span:first-child {
          font-weight: bold;
        }
      }
      .typeIcon {
        position: absolute;
        left: 0;
        top: 0;
      }
      .scaleIcon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .expansionIcon {
        position: absolute;
        right: 0.1in;
        bottom: 0.1in;
      }
    }
  }


  /* ===== THE CARD BACKS ===== */

  .card.back {

    h1, h2 {
      position: absolute;
      left: 0;
      right: 0;
    }

    h1 {
      top: 0.75in;
    }

    h2 {
      font-size: 75%;
      bottom: 0.6in;
    }

    .naming {
      font-family: $font-body;
      opacity: 0.35;
      font-size: 10pt;
      position: absolute;
      bottom: $thin;
      left: 0;
      right: 0;
    }

    .tier {
      position: absolute;
      bottom: 0.95in; left: 0; right: 0;
      text-align: center;
    }

    .hp-tracker-horizontal {
      padding-right: 14pt;
    }

    .hp-tracker-vertical, .hp-tracker-horizontal {
      font-size: $text-size-content;
      font-family: $font-body;
    }

    &.horizontal {
      .cardType {
        top: 0.2in;
      }
      .class {
        bottom: 0.2in;
      }
    }

    &.Adventurer, &.Persona, &.Skill {
      h1 {
        top: 0.45in;
      }
    }

    &.Encounter {

      h1 {
        top: 0.4in;
      }

      h2 {
        bottom: 0.5in;
      }

      .hp-tracker-vertical-right {
        top: 0.10in;
      }
      .hp-tracker-horizontal {
        bottom: 0;
      }
      .hp-tracker-vertical-left {
        bottom: 0.09in;
      }
    }
  }


  /* ===== BACKGROUNDS ===== */

  .card.front, .card.back {
    &:before {
      content: "";
      position: absolute;
      top: 1.125in; left: .625in;
      width: 1in;
      height: 1in;

      background: no-repeat center center;
      background-size: 1in 1in;
    }
  }

  .card.back:after {
    /* Image is 2000x351 */
    content: "";
    position: absolute;
    bottom: 0.25in; left: .625in;
    width: 1in;
    height: 0.175in;

    background: no-repeat center center;
    background-size: 1in 0.175in;
    background-image: url(../../../../shared/images/logo/logo-black-on-white.png) !important;
  }

  .card.back.horizontal:after {
    left: 1.5in;
    top: 1.5in;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.dark:after {
    background-image: url(../../../../shared/images/logo/logo-white-on-black.png) !important;
  }

  .card.back.Influence { &:before {
    background-image: url(../../../../shared/images/icons/influence.svg) !important;
  }}
  .card.back.Magic { &:before {
    background-image: url(../../../../shared/images/icons/magic.svg) !important;
  }}
  .card.back.Melee { &:before {
    background-image: url(../../../../shared/images/icons/melee.svg) !important;
  }}
  .card.back.Music { &:before {
    background-image: url(../../../../shared/images/icons/music.svg) !important;
  }}
  .card.back.Ranged { &:before {
    background-image: url(../../../../shared/images/icons/ranged.svg) !important;
  }}
  .card.back.Tech { &:before {
    background-image: url(../../../../shared/images/icons/tech.svg) !important;
  }}

  .card.back.Adventurer { &:before {
    left: 0.4in;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-image: url(../../../../shared/images/icons/adventurer.svg) !important;
  }}
  .card.back.Persona { &:before {
    left: 0.4in;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-image: url(../../../../shared/images/icons/persona.svg) !important;
  }}
  .card.back.Skill { &:before {
    left: 0.4in;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-image: url(../../../../shared/images/icons/skill.svg) !important;
  }}

  .card.back.Helper { &:before {
    background-image: url(../../../../shared/images/icons/helper.svg) !important;
  }}

  .card.back.Loot {
    .tier {
      bottom: 0.55in;
    }
    &:before {
      background-image: url(../../../../shared/images/icons/loot.svg) !important;
    }
  }

  .card.back.Encounter {
    .tier {
      left: 0.03in;
      bottom: 0.33in;
    }
  }
  .card.back.Beast:before {
    background-image: url(../../../../shared/images/icons/beast.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Bandit:before {
    background-image: url(../../../../shared/images/icons/bandit.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Fae:before {
    background-image: url(../../../../shared/images/icons/fae.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Horror:before {
    background-image: url(../../../../shared/images/icons/horror.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Synth:before {
    background-image: url(../../../../shared/images/icons/synth.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Titanspawn:before {
    background-image: url(../../../../shared/images/icons/titanspawn.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .card.back.Undead:before {
    background-image: url(../../../../shared/images/icons/undead.svg) !important;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
