@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: $color
    background-color: $bg-color

    & > svg.m3-svg-icon
        fill: $color

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

    &:not(&:has(span.m3.m3-ripple-domain)):active
        &::before
            background: color-mix(in srgb, $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
        gap: 12px
        border: none
        contain: content
        text-align: center
        align-items: center
        flex-direction: row
        display: inline-flex
        box-sizing: border-box
        justify-content: center

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

        content: ""

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

    &.primary
        @include m3-fab-colors-palette($primary-container, $on-primary-container)

    &.secondary
        @include m3-fab-colors-palette($secondary-container, $on-secondary-container)

    &.tertiary
        @include m3-fab-colors-palette($tertiary-container, $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, $primary 8%, transparent)

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

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

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

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

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

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

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