// Use px and don't use variables here, we want the wallet to look
// consistent regardless of theme or screen size.

$wallet-width: 680px;
$wallet-height: 280px;

.PaperWallet {
  position: relative;
  margin: 0 auto;
  width: $wallet-width;
  height: $wallet-height;
  border: 1px solid #163151;
  user-select: none;
  cursor: default;
  background: #FFF;
  color: #333;

  &-sidebar {
    float: left;
    height: 100%;
    width: auto;
  }

  &-block {
    position: relative;
    float: left;
    width: 27.5%;
    padding: 20px;

    &-box {
      width: 150px;
      height: 150px;

      &.is-shaded {
        background: rgba(#000, 0.02);
      }
    }

    &-text {
      position: absolute;
      top: 50%;
      left: 100%;
      width: 100%;
      margin: 0;
      transform: translate(-50%, -50%) rotate(-90deg);
      font-size: 13px;
      font-weight: 600;
      color: #0b7290;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
  }

  &-info {
    float: left;
    width: 85%;
    padding: 0 20px;

    &-text {
      margin: 0 0 5px;
      text-align: left;
      font-size: 14px;
      font-family: 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
      font-weight: 300;

      &-label {
        font-weight: 600;
      }
    }
  }

  &-identicon {
    position: absolute;
    right: 15px;
    bottom: 45px;

    &-left {
      float: left;
    }

    &-text {
      float: left;
      width: 130px;
      padding: 0 5px;
      margin: 12px 0 0;
      font-size: 9px;
      text-align: center;
    }
  }
}