// postcss-bem-linter: define button
.mdc-button {
  @include mdc-typography(body2);
  @include mdc-theme-prop(color, text-primary-on-light);

  display: inline-block;
  position: relative;
  min-width: 64px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 2px;
  outline: none;
  background: transparent;
  font-size: 14px; // Override font to specifically be px as spec defined pt
  font-weight: 500;
  line-height: 36px; // Override line-height so text aligns centered
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  user-select: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(black, .18);

  @include mdc-theme-dark {
    @include mdc-theme-prop(color, text-primary-on-dark);

    -webkit-tap-highlight-color: rgba(white, .18);
  }

  // postcss-bem-linter: ignore
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: mdc-animation-exit(opacity, 120ms);
    border-radius: inherit;
    background: currentColor;
    content: "";
    opacity: 0;
  }

  &:focus::before {
    transition: mdc-animation-enter(opacity, 120ms);
    opacity: .12;
  }

  &:active::before {
    transition: mdc-animation-enter(opacity, 120ms);

    // Slightly darker value for visual distinction.
    // This allows a full base that has distinct modes.
    // Progressive enhancement with ripples will provide complete button spec alignment.
    opacity: .18;
  }

  &:focus:active::before {
    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
  }

  &:active {
    outline: none;
  }

  &:hover {
    cursor: pointer;
  }

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &--dense {
    height: 32px;
    font-size: .8125rem; // 13sp
    line-height: 32px;
  }

  &--raised {
    @include mdc-elevation(2);
    @include mdc-elevation-transition;

    min-width: 88px;

    &:active {
      @include mdc-elevation(8);
    }

    @include mdc-theme-dark(".mdc-button") {
      @include mdc-theme-prop(background-color, primary);

      // postcss-bem-linter: ignore
      &::before {
        // We are explicitly not fully adhering to Material Design here.
        // This should be the 700-shade when active instead of a black shade.
        // Due to the complexity involved in adhering fully it is being ignored.
        // Instead re-using the existing architecture for shading works just fine.
        color: black;
      }
    }
  }

  &--primary {
    @include mdc-theme-prop(color, primary);

    @include mdc-theme-dark(".mdc-button") {
      @include mdc-theme-prop(color, primary);
    }

    // postcss-bem-linter: ignore
    &.mdc-button--raised {
      @include mdc-theme-prop(background-color, primary);
      @include mdc-theme-prop(color, text-primary-on-primary);

      // postcss-bem-linter: ignore
      &::before {
        color: black;
      }
    }
  }

  &--accent {
    @include mdc-theme-prop(color, accent);

    @include mdc-theme-dark(".mdc-button") {
      @include mdc-theme-prop(color, accent);
    }

    // postcss-bem-linter: ignore
    &.mdc-button--raised {
      @include mdc-theme-prop(background-color, accent);
      @include mdc-theme-prop(color, text-primary-on-accent);

      // postcss-bem-linter: ignore
      &::before {
        color: black;
      }
    }
  }

  &--compact {
    padding: 0 8px;
  }

  fieldset:disabled &,
  &:disabled {
    color: rgba(0, 0, 0, .26);
    cursor: default;
    pointer-events: none;

    @include mdc-theme-dark(".mdc-button") {
      color: rgba(255, 255, 255, .3);
    }
  }

  fieldset:disabled &--raised,
  &--raised:disabled {
    @include mdc-elevation(0);

    background-color: rgba(0, 0, 0, .12);
    pointer-events: none;

    @include mdc-theme-dark(".mdc-button") {
      background-color: rgba(255, 255, 255, .12);
    }
  }
}

// postcss-bem-linter: end

.mdc-button.mdc-ripple-upgraded {
  @include mdc-ripple-base;
  @include mdc-ripple-bg((pseudo: "::before"));
  @include mdc-ripple-fg((pseudo: "::after"));

  overflow: hidden;

  @include mdc-theme-dark(".mdc-button", true) {
    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
  }

  @each $theme-style in (primary, accent) {
    &.mdc-button--#{$theme-style} {
      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
    }
  }
}

.mdc-button--raised.mdc-ripple-upgraded {
  @each $theme-style in (primary, accent) {
    &.mdc-button--#{$theme-style} {
      @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
      @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
    }
  }
}