/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

#banner {
  box-sizing: border-box;
  height: 2em;
  margin: 0 auto;
  width: 60%;
}

#content {
  margin: 2em;
}

.trainer {
  margin: 1em auto;
  width: 48em;
  font-family: 'Power Green';
  box-sizing: border-box;
  background-color: #f7f7f7;
  border: 1px solid #999;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  .trainer-info {
    padding: .5em .75em .25em .75em;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom: 1px solid #888;

    &.ruby {
      background-color: #D67873;
    }

    &.sapphire {
      background-color: #445E9C;
    }

    &.firered {
      background-color: #F5AC78;
    }

    &.leafgreen {
      background-color: #A7DB8D;
    }

    &.emerald {
      background-color: #4E8234;
    }

    &.unaccounted {
      background-color: black;

      h2 {
        color: white;
      }
    }

    h2 {
      margin: 0;
      display: inline-block;
      font-size: 24px;
    }

    .tid {
      display: inline-block;
      font-size: 13px;
    }
  }

  .pc-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .party {
      margin: 0;

      li {
        display: block;
        margin: -5px 0;

        .party-icon {
          display: inline-block;
          vertical-align: middle;

          img {
            image-rendering: pixelated;
          }
        }

        .party-name {
          vertical-align: sub;
          display: inline-block;
          margin-left: .25em;
          white-space: pre;
        }

        a {
          color: black;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .pc-box {
      margin: .5em;
      padding: .5em;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 236px;
      box-sizing: border-box;

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

      .pc-contents {
        margin: 0;

        .spacer {
          display: block;
          width: 32px;
          height: 32px;
        }

        img {
          image-rendering: pixelated;
        }
      }
    }
  }
}

.pkv-hover {
  display: none;
  background-color: #111;
  color: #fff;
  z-index: 1;
  padding: .5em;
  box-shadow: 0px 0px 2px 1px #B3B3B3;
  border-radius: 4px;
  position: absolute;
  max-width: 45ch;
  text-align: left;

  .pc-data-name {
    font-weight: bold;
    white-space: pre;
  }
}

.pokemon-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1em;

  li {
    display: block;

    img {
      image-rendering: pixelated;
    }
  }
}

.pokemon {
  font-family: 'Power Green';
  display: flex;
  margin: 1em 0;
  background-color: #c0c8c4;
  border: 1px solid #888;
  overflow: hidden;

  .ot-gender {
    &.male {
      color: blue;
    }

    &.female {
      color: red;
    }
  }

  .pokemon-name {
    font-weight: bold;
    white-space: pre;

    a {
      color: blue;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &.in-emerald {
    .pokemon-image {
      .pokemon-sprite {
        margin: -14px;
      }
    }
  }

  .pokemon-basics {
    width: 8.5em;

    .pokemon-nameline {
      background-color: #dcb880;
      padding: 6px 6px 0 6px;
      border-top: 1px solid #d8a878;
      border-left: 1px solid #d8a878;
      border-right: 1px solid #d8a878;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      margin: .25em .25em 0;
    }

    .pokemon-ball {
      margin: -8px;
      image-rendering: pixelated;
    }

    .pokemon-name {
      margin-left: 3px;
    }

    .pokemon-gender {
      float: right;

      &.female {
        color: #ff6363;
      }

      &.male {
        color: #00a2ff;
      }
    }

    .pokemon-level {
      padding: 4px 8px 0px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      background-color: white;
      margin: 0 .25em;
    }

    .pokemon-image {
      text-align: center;

      .pokemon-image-wrap {
        margin: 1em auto;
        border: 10px solid #e0e0c8;
        background-color: white;
        border-radius: 10px;
        display: inline-block;
        padding: 4px;
        position: relative;

        img {
          image-rendering: pixelated;
        }

        .pkv-shiny-star {
          position: absolute;
          top: 0;
          right: -1.5em;
          image-rendering: pixelated;
        }
      }
    }

    .pokemon-item-label {
      background-color: #dcb880;
      color: white;
      border-top: 1px solid #d8a878;
      padding: .25em .25em 0 0.5em;

      &.with-item {
        padding-left: 30px;
      }

      &:not(.with-item) {
        margin-top: .25em;
      }
    }

    .pokemon-item {
      background-color: white;
      padding: .25em .25em .25em .5em;

      img {
        vertical-align: bottom;
        margin: -4px -4px -4px -8px;
        image-rendering: pixelated;
      }
    }
  }

  .pkv-type {
    image-rendering: pixelated;
  }

  table {
    border-spacing: 0;
    width: 100%;

    th {
      text-align: left;
      color: white;
      font-weight: normal;
      white-space: nowrap;
    }

    .table-bubble {
      background-color: #e4f0f0;
      text-align: center;
      padding: 4px 1em 0 1em;
      height: 100%;

      &.tb-top {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      &.tb-bottom {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }

    .tb-only {
      text-align: center;
      background-color: #e4f0f0;
      border-radius: 6px;
      padding: 3px 3px 0 3px;
      height: 100%;
    }

    tr:nth-child(odd) {
      .table-bubble {
        background-color: #e4e8d0;
      }
    }
  }

  .pokemon-tab {
    border-left: 1px solid #585450;
    flex: 1 0px;
  }

  .pokemon-details {
    background-color: #94c49c;

    table {
      padding-top: .75em;

      th {
        padding: .25em 1em 0 .5em;
      }

      td {
        padding: 0 .5em 0 0;
      }

      tr:nth-child(odd) {
        background-color: #84ac88;
      }
    }
  }

  .pokemon-stats {
    background-color: #6870d8;

    table {
      padding-top: .5em;

      tr:nth-child(even) {
        background-color: #8890f8;
      }

      th {
        padding: .25em .5em 0 1.5em;
      }

      td {
        padding: 0 1em 0 0;
      }

      .pokemon-nature-label th {
        padding-top: .75em;
      }

      .nature-benefit {
        color: #99ff00;
      }

      .nature-hinder {
        color: red;
      }
    }
  }

  .pokemon-moves {
    background-color: #ff847c;

    table {
      padding-top: .75em;

      tr:nth-child(even) {
        background-color: #f7aca6;

        .tb-only {
          color: black;
        }
      }

      tr:nth-child(odd) {
        td {
          padding-top: .25em;
          color: white;
        }
      }

      th {
        padding: .25em 0.25em 0 .25em;
        text-align: right;
      }

      td {
        padding-right: .5em;
      }

      .pp-label {
        display: block;
        position: absolute;
        padding-left: .125em;
      }

      .pp-value {
        display: block;
        margin-left: 2em;
        text-align: right;
      }
    }
  }

  .pokemon-met-label {
    background-color: #84ac88;
    padding: .75em 0 0 .5em;
    overflow: hidden;
    color: white;
  }

  .pokemon-description {
    background: linear-gradient(
      to bottom,
      #e4f0f0,
      #e4f0f0 50%,
      #e4e8d0 50%,
      #e4e8d0
    );

    background-size: 100% 3em;
    padding: 0 .5em;
    height: 100%;
    line-height: 1.5em;
    border-top: 1px solid #888;
  }

  .pokemon-ribbons {
    background-color: #f8d8f8;

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0.5em;

      li {
        display: block;

        img {
          image-rendering: pixelated;
        }
      }
    }
  }

  .pokemon-contest {
    background-color: #b9d7f2;

    .pokemon-condition {
      display: block;

      .pkcv-cool-circle {
        fill: #f59a55;
      }

      .pkcv-beauty-circle {
        fill: #8095ff;
      }

      .pkcv-cute-circle {
        fill: #f5a8d3;
      }

      .pkcv-smart-circle {
        fill: #79e15c;
      }

      .pkcv-tough-circle {
        fill: #f7f100;
      }

      .pkcv-outline {
        stroke: gray;
        stroke-width: 5;
        stroke-linejoin: round;
        fill: white;
        fill-opacity: 0.3;
      }

      .pkcv-line {
        stroke: gray;
        stroke-width: 2;
      }

      .pkcv-data {
        fill: #4ee100;
        fill-opacity: 0.9;
      }

      .pkcv-label, .pkcv-label-outline {
        font-family: "Power Green";
        font-size: 50px;
        text-anchor: middle;
      }

      .pkcv-label-outline {
        stroke: #f0f8f8;
        stroke-width: 6;
        stroke-linejoin: butt;
      }

      .pkcv-sheen-bg {
        fill: #706860;
      }

      .pkcv-sheen-data {
        fill: #a048c8;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      .pkcv-sheen-border {
        fill-opacity: 0;
        stroke-width: 5;
        stroke: gray;
      }

      .pkcv-sheen-label {
        fill: white;
        font-size: 40px;
      }
    }
  }
}

.clear {
  clear: both;
}

#pokemon-embed {
  width: 350px;
  margin: 1em;

  #pokemon-embed-tabs {
    margin: 0;
    padding: 0;
    text-align: right;

    li {
      display: inline-block;
      padding: 3px;
      border-width: 1px 1px 0 1px;
      border-style: solid;
      border-color: #888;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;

      a {
        font-family: 'Power Green';
        color: white;
        text-decoration: none;
        text-transform: uppercase;
      }

      &.ptabe-details {
        background-color: #94c49c;

        &.active, &:hover {
          background-color: #84ac88;
        }
      }

      &.ptabe-stats {
        background-color: #8890f8;

        &.active, &:hover {
          background-color: #6870d8;
        }
      }

      &.ptabe-moves {
        background-color: #f7aca6;

        &.active, &:hover {
          background-color: #ff847c;
        }
      }

      &.ptabe-contest {
        background-color: #b9d7f2;

        &.active, &:hover {
          background-color: #63aef2;
        }
      }

      &.ptabe-ribbons {
        background-color: #f8d8f8;

        &.active, &:hover {
          background-color: #f8a0f8;
        }
      }
    }
  }

  .pokemon {
    margin: 0;
  }

  .pokemon-tab {
    display: none;
  }
}

#pk-embed-code {
  width: 50%;

  textarea {
    width: 100%;
    height: 4em;
  }
}