@function luma($c) {
  $-local-red: red(rgba($c, 1.0));
  $-local-green: green(rgba($c, 1.0));
  $-local-blue: blue(rgba($c, 1.0));

  @return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
}

@function pick-visible-color($bg, $c1, $c2) {
  $bg-luma: luma($bg);
  $c1-luma: luma($c1);
  $c2-luma: luma($c2);
  $c1-diff: abs($bg-luma - $c1-luma);
  $c2-diff: abs($bg-luma - $c2-luma);

  @if $c1-diff > $c2-diff {
    @return $c1;
  }

  @return $c2;
}

@mixin wp-core-ui-button($name, $base-color) {
  $lighter-1: lighten($base-color, 5%);
  $lighter-2: lighten($base-color, 10%);
  $lighter-3: lighten($base-color, 15%);
  $darker-1: darken($base-color, 5%);
  $darker-2: darken($base-color, 10%);

  .wp-core-ui .button-#{$name},
  .button-#{$name} {
    background: $base-color;
    border-color: $darker-1 $darker-2 $darker-2;
    color: pick-visible-color($base-color, #fff, #222);
    box-shadow: 0 1px 0 $darker-2;
    text-shadow: 0 -1px 1px $darker-2, -1px 0 1px $darker-2, 0 1px 1px $darker-2, 1px 0 1px $darker-2;
  }
  .wp-core-ui .button-#{$name}:focus,
  .wp-core-ui .button-#{$name}:hover,
  .button-#{$name}:focus,
  .button-#{$name}:hover{
    background: $lighter-1;
    border-color: $darker-2;
    color: pick-visible-color($lighter-1, #fff, #222);
    box-shadow: 0 1px 0 $darker-2;
  }
  .wp-core-ui .button-#{$name}.active,
  .wp-core-ui .button-#{$name}.active:focus,
  .wp-core-ui .button-#{$name}.active:hover,
  .wp-core-ui .button-#{$name}:active,
  .button-#{$name}.active,
  .button-#{$name}.active:focus,
  .button-#{$name}.active:hover,
  .button-#{$name}:active{
    background: $darker-1;
    border-color: $darker-2;
    box-shadow: inset 0 2px 0 $darker-2;
  }
  .wp-core-ui .button-#{$name}.disabled,
  .wp-core-ui .button-#{$name}:disabled,
  .wp-core-ui .button-#{$name}[disabled] {
    color: #7b8188!important;
    border-color: $lighter-2!important;
    background: $lighter-3!important;
    box-shadow: none!important;
    text-shadow: 0 1px 0 #fff!important;
    cursor: default;
    transform: none!important;
  }
}