Refactor the following css code to sass. Use variables, mixins, parent selectors, and nested selectors

sass-refactor.scss

input[type='submit'], input[type=button], button {
  width: 15%;
  height: 30px;
  color: #EDFFF9;
  background: #40FD65;
  border: 3px solid rgba(#666, 0.3);
}

input[type='submit']:hover , input[type='button']:hover, button:hover {
  width: 15%;
  height: 30px;
  color: #666;
  background: rgba(#72AAD0, 0.7);
  border: 3px solid rgba(#666, 0.3);
}

input[type='submit']:active , input[type='button']:active, button:active {
  width: 15%;
  height: 30px;
  color: #666;
  background: #72AAD0;
  border: 3px solid #89DDFF;
}

solution.scss

$black: #666;
$white: #EDFFF9;
$green: #40FD65;
$blue: #89DDFF;
$lightblue: #72AAD0;

@mixin button($font-color, $background-color, $border-color) {
  width: 15%;
  height: 30px;
  color: $font-color;
  background: $background-color;
  border: 3px solid $border-color;
}

input[type='submit'], input[type=button], button {
  @include button($white, $black, rgba($black, 0.3))
  &:hover {
    @include button($black, rgba($lightblue, 0.7), rgba($black, 0.3))
  }
  &:active {
    @include button($black, $lightblue, rgba($blue, 0.3))
  }
}