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-Outlined-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 state-layer

    &.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)