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

.trainer {
  margin: 1em;
  font-family: 'Power Green';
  width: 758px;
  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;
    }

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

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

  .pc-boxes {
    display: flex;
    flex-wrap: wrap;

    .party {
      margin: 0;

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

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

        .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;
        }

        .pc-pokemon {
          .pc-data {
            display: none;
            background-color: #111;
            color: #fff;
            z-index: 1;
            padding: .5em;
            box-shadow: 0px 0px 2px 1px #B3B3B3;
            border-radius: 4px;
            position: absolute;

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

.pokemon {
  font-family: 'Power Green';
  display: flex;
  margin: 1em;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: #fafafa;

  .male {
    color: blue;
  }

  .female {
    color: red;
  }

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

  .pd-details {
    color: white;
    font-size: bold;
    padding: .25em .5em;
  }

  .pd-contents {
    p {
      margin: .25em;
    }
  }

  .pokemon-basics {
    margin: .5em;
  }

  .pokemon-memo {
    border-left: 1px solid #aaa;
    background-color: #e7e8ff;

    .pd-details {
      background-color: #2068e0;
    }
  }

  .pokemon-stats {
    border-left: 1px solid #aaa;

    .pd-details {
      background-color: #d078f8;
    }

    table {
      margin: 0 1em;

      th {
        text-align: center;
        padding-right: .5em;
      }

      td {
        text-align: right;
      }
    }
  }
}