@mixin utility-button($include-selector: true) {
  @if $include-selector {
    .button {
      @include utility-button-style;
    }
  }
  @else {
    @include utility-button-style;
  }
}

@mixin utility-button-style {
  &:hover{
    box-shadow: $shadow-style-front color("utility-shadow");
  }

  &:active{
    box-shadow: $shadow-style-back color("utility-shadow");
  }

  &:not(.button--text) {
    @include set-colors("utility-interactive", $rewrite-css-vars: true);
    box-shadow: $shadow-style-front color("utility-shadow");

    &:hover{
      background-color: color("utility-interactive-hover");
    }

    &:active{
      background-color: color("utility-interactive-hover");
      box-shadow: $shadow-style-back color("utility-shadow");
    }

    &[disabled] {

      &:hover {
        @include set-colors("utility-interactive");
      }

      &.visually-disabled {
        color: color("foreground-disabled");
        box-shadow: none;

        & * {
          color: color("foreground-disabled");
        }
      }

      &.button--processing {
        color: transparent;

        & * {
          color: transparent;
        }

        &:active {
          box-shadow: $shadow-style-front color("utility-shadow");
        }

        &::after {
          --processing-color: #{color("utility-foreground")};
        }
      }
    }
  }
}