@import '@material/button/mixins';
@import '@material/button/variables';
@import '@material/fab/mixins';
@import '@material/ripple/mixins';
@import '@material/icon-button/mixins';
@import '../mdc-helpers/mdc-helpers';

// Applies the disabled theme color to the text color.
@mixin _mat-button-disabled-color() {
  @include mdc-theme-prop(color,
      mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
}

// Wraps the content style in a selector for the disabled state.
// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
// override this, neither will it apply to anchor tags. This needs to override the
// previously set theme color, so it must be ordered after the theme styles.
// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
// manually styling disabled buttons with a [disabled] selector.
@mixin _mat-button-apply-disabled-style() {
  &[disabled][disabled] {
    @content;
  }
}

// Applies the disabled theme background color for raised buttons. Value is taken from
// mixin `mdc-button--filled`.
// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
// or otherwise have a mixin we can call to apply this style for both button and anchors.
@mixin _mat-button-disabled-background() {
  @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), 0.12));
}


@mixin mat-button-theme-mdc($theme) {
  @include mat-using-mdc-theme($theme) {
    // Add state interactions for hover, focus, press, active. Colors are changed based on
    // the mixin mdc-states-base-color
    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
      @include mdc-states($query: $mat-theme-styles-query);
    }

    .mat-mdc-button, .mat-mdc-outlined-button {
      &.mat-unthemed {
        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
      }
    }

    .mat-mdc-raised-button,
    .mat-mdc-unelevated-button {
      &.mat-unthemed {
        @include mdc-button-container-fill-color(
            $mdc-theme-surface, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-background();
      }
    }

    .mat-mdc-outlined-button {
      &.mat-unthemed {
        @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-button-outline-color(error, $query: $mat-theme-styles-query);
      }

      @include _mat-button-apply-disabled-style() {
        @include mdc-theme-prop(border-color,
            mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
      }
    }

    .mat-mdc-raised-button {
      @include _mat-button-apply-disabled-style() {
        @include mdc-elevation(0, $query: $mat-theme-styles-query);
      }
    }

    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
      }
    }

    @include mdc-button-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-button-typography-mdc($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-button-without-ripple($query: $mat-typography-styles-query);
  }
}

@mixin mat-fab-theme-mdc($theme) {
  @include mat-using-mdc-theme($theme) {
    .mat-mdc-fab, .mat-mdc-mini-fab {
      @include mdc-states($query: $mat-theme-styles-query);

      &.mat-unthemed {
        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
        @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
        @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
        @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
        @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
        @include _mat-button-disabled-background();
        @include mdc-elevation(0, $query: $mat-theme-styles-query);
      }
    }

    @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-fab-typography-mdc($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
  }
}

@mixin mat-icon-button-theme-mdc($theme) {
  @include mat-using-mdc-theme($theme) {
    .mat-mdc-icon-button {
      @include mdc-states($query: $mat-theme-styles-query);

      &.mat-unthemed {
        @include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query);
        @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
        @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
        @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
      }
    }

    @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-icon-button-typography-mdc($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
  }
}