@use '@finastra/fds-theme/color' as color;
@use '@finastra/fds-theme/typography' as typography;
@use '../core/theming/color-utility' as utility;

@mixin theme($theme: null) {
  .mat-mdc-button-base {
    &.mdc-button[mat-stroked-button] {
      &.mat-primary {
        border-color: var(--fds-outline-info);
      }

      &.mat-accent {
        border-color: utility.get-color-from-token(secondary, 0.5, $theme);
      }

      &.mat-error {
        border-color: var(--fds-outline-error);
      }

      &.mat-success {
        border-color: var(--fds-outline-success);
      }

      &[disabled] {
        background-color: var(--fds-surface-disabled);
        border-color: var(--fds-on-surface-disabled);
      }
    }

    &.mdc-button[mat-flat-button],
    &.mdc-fab {
      &.mat-error {
        background-color: var(--fds-error);
        color: var(--fds-on-error);
      }
      &.mat-success {
        background-color: var(--fds-success);
        color: var(--fds-on-success);
      }
      &.mat-accent {
        background-color: var(--fds-secondary);
        color: var(--fds-on-secondary);
      }
      &[disabled] {
        background-color: var(--fds-surface-disabled);
        color: var(--fds-on-surface-disabled);
      }
    }

    &.mdc-button {
      &.mat-error {
        color: var(--fds-error);

        .mdc-button__ripple::before {
          background-color: var(--fds-error);
        }
      }

      &.mat-success {
        color: var(--fds-success);

        .mdc-button__ripple::before {
          background-color: var(--fds-success);
        }
      }
    }

    &.mat-mdc-icon-button {
      &.mat-neutral,
      &.mat-gradient {
        .mat-mdc-button-ripple {
          @include color.color(primary);
        }
      }

      &.mat-neutral {
        .mat-icon {
          @include color.color(on-background);
        }
      }

      &.mat-gradient {
        .mat-icon {
          @include color.background(gradient-vertical);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }

  .mat-mdc-fab.mat-gradient {
    @include color.background(gradient-vertical);
    @include color.color(on-gradient);
  }
}

@mixin typography($config: null) {
  button[dense],
  a[dense],
  *[dense] button {
    @include typography.typography('button-2');
  }

  button[large],
  a[large],
  *[large] button {
    @include typography.typography('button-1');
  }
}