@use '@angular/material' as mat;

// In fab speed dials, mini fabs are tertiary as well as default fab buttons
eco-fab-speed-dial {
    .mdc-fab {
        @include mat.fab-overrides(
            (
                container-color: var(--mat-sys-tertiary-container),
                foreground-color: var(--mat-sys-on-tertiary-container),
                small-container-color: var(--mat-sys-tertiary-container),
                small-foreground-color: var(--mat-sys-on-tertiary-container),
            )
        );
    }
}

.mdc-fab,
.mdc-mini-fab {
    &.nat-rounded {
        @include mat.fab-overrides(
            (
                container-shape: var(--mat-sys-corner-full),
                extended-container-shape: var(--mat-sys-corner-full),
                small-container-shape: var(--mat-sys-corner-full),
            )
        );
    }

    &.nat-flat {
        @include mat.fab-overrides(
            (
                container-elevation-shadow: 0,
                focus-container-elevation-shadow: 0,
                hover-container-elevation-shadow: 0,
                extended-container-elevation-shadow: 0,
                extended-focus-container-elevation-shadow: 0,
                extended-hover-container-elevation-shadow: 0,
                small-container-elevation-shadow: 0,
                small-focus-container-elevation-shadow: 0,
                small-hover-container-elevation-shadow: 0,
            )
        );
    }

    &.mat-primary,
    &[color='primary'] {
        @include mat.fab-overrides(
            (
                container-color: var(--mat-sys-primary-container),
                foreground-color: var(--mat-sys-on-primary-container),
                small-container-color: var(--mat-sys-primary-container),
                small-foreground-color: var(--mat-sys-on-primary-container),
            )
        );
    }

    &.mat-error,
    &[color='error'] {
        @include mat.fab-overrides(
            (
                container-color: var(--mat-sys-error-container),
                foreground-color: var(--mat-sys-on-error-container),
                small-container-color: var(--mat-sys-error-container),
                small-foreground-color: var(--mat-sys-on-error-container),
            )
        );
    }

    &[color='tertiary'] {
        @include mat.fab-overrides(
            (
                container-color: var(--mat-sys-tertiary-container),
                foreground-color: var(--mat-sys-on-tertiary-container),
                small-container-color: var(--mat-sys-tertiary-container),
                small-foreground-color: var(--mat-sys-on-tertiary-container),
            )
        );
    }
}