.amount {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  height: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.amount__input {
  width: 100%;
  
  background: #f9fafa;
  border: 1px solid #dce2e1;
  border-radius: 8px;
  text-align: center;
  color: #333333;
  font-weight: 700;
  font-size: 14px;
}
@media (min-width: 450px) {
  .amount__input {
    padding: 0 30px;
  }
}
.amount__input:focus {
  outline: none;
  border: 1px solid #05aa82;
}

.amount__btn {
  display:none;
}
@media (min-width: 450px) {
  .amount__btn {
      display:block;
      position: absolute;
      padding: 0 15px;
      height: 100%;
      font-size: 20px;
      color: #333333;
      cursor: pointer;
      -webkit-transition: color 250ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
      -o-transition: color 250ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
      transition: color 250ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
  }
}

.amount__btn:hover {
  color: #05aa82;
}
.amount__btn--increment {
  right: 0;
}
.amount__btn--decrement {
  left: 0;
}