// Color variables (appears count calculates by raw css)
@color0: #e3e7e9; // Appears 2 times

// Width variables (appears count calculates by raw css)
@width2: 100%; // Appears 2 times


.yyui-calc {
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  min-height: 280px;
  width: 240px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 1px 6px hsla(0,0%,39%,.2);
  border-radius: 6px;
  .yyui-calcresult {
    background-color: @color0;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    flex: 2;
    -ms-flex: 2;
    min-height: 80px;
    line-height: 30px;
    padding-top: 40px;
    padding: 0px 30px;
    text-align: right;
    .last-row {
      color: #969ba3;
      flex: 1;
      -ms-flex: 1;
      font-size: 16px;
      max-width: @width2;
      margin-top:15px;
      overflow: hidden;
      word-wrap: break-word;
    }
    .cur-row {
      color: #46494d;
      flex: 1;
      -ms-flex: 1;
      font-size: 16px;
      max-width: @width2;
      margin-top: 10px;
      overflow: hidden;
      word-wrap: break-word;
    }
  }
  .yyui-calcbutton {
    flex: 5;
    -ms-flex:5;
    .yyui-calcbutton-button {
      background-color: #fafafa;
      border: none;
      box-shadow: inset 1px 1px 0 0 @color0;
      color: #979ca4;
      cursor: pointer;
      font-size: 16px;
      line-height: 0px;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: relative;
      text-align: center;
      &:before {
        background: #aaaaaa;
        border-radius: 50%;
        bottom: 0;
        content: "";
        height: 40px;
        left: 0;
        margin: auto;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
      }
      &:focus {
        outline: none;
      }
    }
    .yyui-calcbutton-button.clicked {
      &:before {
        animation: yyui-calc-click .5s ease-out 0s 1 alternate forwards;
      }
    }
    .yyui-calcbutton-button.button-equal {
      background-color: #fa722e;
      color: #ffffff;
    }
  }
  .yyui-calcbutton-row {
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    height: 200px;
  }
  .yyui-calcbutton-col {
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
  }
}
.yyui-calcbutton {
  .calcs1 {
    flex: 1;
    -ms-flex: 1;
  }
  .calcs2 {
    flex: 2;
    -ms-flex: 2;
  }
  .calcs3 {
    flex: 3;
    -ms-flex: 3;
  }
}
@keyframes yyui-calc-click{
  0%{
    transform: scale(1);
    opacity: .7;
  }
  100%{
    transform: scale(3);
    opacity: 0;
  }
}