@use '@angular/material' as mat;

@mixin fab-theme($theme) {
  body {
    .mat-mdc-fab {
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;

      @include mat.elevation-transition();
      @include mat.elevation(4);

      &:hover,
      &:active {
        @include mat.elevation(8);
      }

      &.top,
      &.right,
      &.bottom,
      &.left {
        position: fixed;
      }

      &.top {
        top: 1.6em;
      }

      &.right {
        right: 4em;
      }

      &.bottom {
        bottom: 2em;
      }

      &.left {
        left: 1em;
      }

      .mdc-button__label {
        display: flex;
      }
    }

    .mat-mdc-fab.primary-fab,
    .mat-mdc-mini-fab.primary-fab {
      background-color: mat.get-theme-color($theme, primary-container);
      color: mat.get-theme-color($theme, on-primary-container);
    }

    .mat-mdc-fab.secondary-fab,
    .mat-mdc-mini-fab.secondary-fab {
      background-color: mat.get-theme-color($theme, secondary-container);
      color: mat.get-theme-color($theme, on-secondary-container);
    }

    .mat-mdc-fab.tertiary-fab,
    .mat-mdc-mini-fab.tertiary-fab {
      background-color: mat.get-theme-color($theme, tertiary, 50);
      color: mat.get-theme-color($theme, on-tertiary);
    }
  }
}
