page-amount {
  .amount-pane {
    .shapeshift-values {
      padding: 1.7rem;
    }
    .amount-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding: 15% 16px 0 16px;
      @media(max-height: 640px) {
        padding-top: 10%;
      }
      @media(max-height: 500px) {
        padding-top: 5%;
      }
      .expression-container {
        display: flex;
        align-items: center;
        .expression{
          font-size: 40px;
          @media(max-height: 640px) {
            font-size: 35px;
          }
          @media(max-height: 500px) {
            font-size: 25px;
          }
        }
        .unit-button {
          cursor: pointer;
          color: color($colors, grey);
          border: 1px solid color($colors, grey);
          padding: 0 5px;
          margin: 0 0 0 1.5rem;
          font-size: 19px;
          @media(max-height: 500px) {
              font-size: 16px;
            }
        }
      }
      .amount {
        color: #A5A4A4;
        margin-left: 5px;
        margin-top: 5px;
      }
      .result {
        color: gray;
        margin-left: 5px;
        margin-top: 5px;
      }
    }
  }

  .keypad {
    color: color($colors, dark);
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    position: absolute;
    bottom: 0;
    width: 100%;
    .row {
      padding: 0 !important;
      margin: 0 !important;
    }
    .col {
      line-height: 40px;
    }
    .operator {
      cursor: pointer;
      background: color($colors, light);
      &:active {
        color: white;
        background-color: color($colors, dark);
      }
    }
    .operator-row {
      width: 25%;
      margin-left: 75%;
      .operator-send {
        color: color($colors, light);
        opacity: 0.9;
        background-color: color($colors, primary);
        font-size: 16px;
        cursor: pointer;
        padding: 0.4rem;
        &:active {
          color: color($colors, primary);
          background-color: #fff;
          border: 1px solid color($colors, primary);
          border-radius: 2px;
        }
      }
    }
    .digit{
      cursor: pointer;
      border: 1px solid color($colors, light);
      &:active {
        background: color($colors, light);
      }
    }
    @media(max-height: 500px) {
      font-size: 12px;
      .col {
        line-height: 20px;
      }
    }
  }
}