@import '@angular/material';

// Material button mixin
@mixin mat-button-override($theme, $secondary) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $is-dark: map-get($theme, is-dark);

  // Buttons
  .mat-mdc-button-base {
    .mat-mdc-button-wrapper {
      line-height: 24px;
    }

    .mdc-button__label {
      display: flex;
      align-items: center;
      letter-spacing: normal;
    }

    font-weight: bold;
    &.mdc-fab:focus,
    &:focus {
      outline: 2px solid map-get($primary, A400);
      outline-offset: 2px;
      &.mdc-icon-button {
        outline-offset: -2px;
        outline-color: currentColor;
      }
      &.mdc-fab {
        &.mat-accent {
          outline-color: map-get($accent, A700);
        }
        &.mat-primary {
          outline-color: map-get($primary, A400);
        }
        &.mat-warn {
          outline-color: map-get($primary, A400);
        }
      }
    }

    &:disabled {
      @if $is-dark {
        background-color: map-get($mic-grey, A500);
      }
    }

    &:hover {
      @include mic-elevation(1);
    }

    &.mat-unthemed {
      @if $is-dark {
        color: $mic-text-colors-normal-light;
      }
    }

    // Flat design (buttons) and fab design (back to top button)
    &.mat-mdc-unelevated-button:not(:disabled),
    &.mat-mdc-fab:not(:disabled) {
      &.mat-unthemed {
        // Secondary
        color: map-get($primary, A400);
        border: 2px solid map-get($primary, A400);
        @if $is-dark {
          background-color: map-get($mic-grey, A500);
        } @else {
          background-color: map-get($mic-grey, A100);
        }
        &:hover {
          outline-color: map-get($primary, 400);
          @if $is-dark {
            background-color: map-get($mic-grey, A700);
          } @else {
            background-color: map-get($secondary, 400);
          }
        }
      }

      // primary
      &.mat-primary {
        outline-color: map-get($primary, A400);
        &:hover {
          background-color: map-get($primary, A700);
        }
      }

      // Accent
      &.mat-accent {
        outline-color: map-get($accent, A400);
        @if $is-dark {
          background-color: map-get($accent, A100);
        } @else {
          background-color: map-get($accent, A400);
        }
      }

      // Warn
      &.mat-warn {
        outline-color: map-get($warn, A400);
        &:hover {
          background-color: map-get($warn, A700);
        }
      }
    }

    // Stroked design (outlines buttons)
    &.mat-mdc-outlined-button {
      // Outline
      &.mic-btn-outline {
        outline-color: currentColor;
        color: map-get($mic-grey, A100);
        background-color: transparent;
        border: solid 2px map-get($mic-grey, A100);
        &:hover {
          background-color: $mic-layout-colors-white-disabled;
        }
        &:disabled {
          color: $mic-layout-colors-white-disabled;
          background-color: transparent;
          border: solid 2px $mic-layout-colors-white-disabled;
        }
      }
    }

    // Large size
    &.mic-btn-lg {
      line-height: normal;
      height: 59px;
      padding: 12px 16px;
    }

    // Small size
    &.mic-btn-sm {
      font-size: small;
      line-height: normal;
      height: 27px;
    }

    &.mat-mdc-button,
    &.mat-mdc-unelevated-button,
    &.mat-mdc-raised-button,
    &.mat-mdc-outlined-button {
      .mat-icon {
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin-right: 0px;
        margin-left: 0px;
      }
    }

    &.mic-btn-icon-right {
      flex-direction: row-reverse;
      > .mat-icon {
        margin-left: 8px;
        margin-right: -2px;
      }
    }

    &.mic-btn-icon-left {
      > .mat-icon {
        margin-right: 8px;
        margin-left: -2px;
      }
    }
  }
  .mic-button-loading {
    .mat-icon {
      display: none;
    }
    .mat-mdc-progress-spinner {
      float: right;
      height: 20px;
      width: 20px;
      margin-left: 8px;
    }
  }

  .mat-mdc-icon-button.mat-mdc-button-base {
    width: 40px;
    height: 40px;
    padding: 6px;
  }
}
