@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
    width: $width
    height: $height
    padding: $padding
    border-radius: $b-radius

@mixin m3-fab-colors-palette($bg-color, $color)
    &:not(.without-elevation)
        @include elevation-3(false)

    color: var($color)
    background-color: var($bg-color)

    & > svg.m3-svg-icon
        fill: var($color)

    & > span.m3.m3-ripple-domain > span.m3.m3-ripple
        background: color-mix(in srgb, var($color) 12%, transparent)

    &:not(&:has(span.m3.m3-ripple-domain)):active
        &::before
            background: color-mix(in srgb, var($color) 20%, transparent)


button.m3.m3-fab
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important

    & > span.m3-icon
        font-family: Material-Symbols-Rounded-Regular, sans-serif

    &.m3
        contain: content
        box-sizing: border-box
        display: inline-flex
        flex-direction: row
        justify-content: center
        align-items: center
        text-align: center
        border: none
        gap: 12px

    &::before
        @include m3-buttons-state-layer-mixin

        content: ""

    &.surface
        @include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)

    &.primary
        @include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)

    &.secondary
        @include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)

    &.tertiary
        @include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)

    &.m3-small-fab
        @include m3-fab-default(12px, 40px, 40px, 11px)
        font-size: 24px

    &.m3-default-fab
        @include m3-fab-default(16px, 56px, 56px, 19px)
        font-size: 24px

    &.m3-large-fab
        @include m3-fab-default(28px, 96px, 96px, 34.5px)
        font-size: 36px

    &.m3-extended-fab
        @include m3-fab-default(16px, auto, 56px, 19px)
        font-size: 24px

    &:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
        @include elevation-4(false)

    &:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
        @include elevation-3(true)

    &:hover
        &.surface:before
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)

        &.primary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)

        &.secondary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)

        &.tertiary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)

    &:focus-visible
        &.surface:before
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)

        &.primary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)

        &.secondary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)

        &.tertiary:before
            background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)