button:not(.m3-fab, .m3-icon-button)
    @include m3-typography-mixin('label-large')

    max-height: 40px
    width: min-content
    white-space: nowrap
    height: min-content
    box-sizing: border-box
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important

    &.m3
        @include center(inline-flex)

        gap: 8px
        border: none
        contain: content
        text-align: center
        padding: 10px 24px
        flex-direction: row
        border-radius: 100px
        box-sizing: border-box

    &.filled
        background-color: var(--md-sys-color-primary)

        &, & > svg.m3-svg-icon
            fill: var(--md-sys-color-on-primary)
            color: var(--md-sys-color-on-primary)

    &.outlined
        outline-offset: -1px
        background-color: transparent
        color: var(--md-sys-color-primary)
        outline: 1px solid var(--md-sys-color-outline) !important

        & > svg.m3-svg-icon
            fill: var(--md-sys-color-primary)

    &.text
        background-color: transparent
        color: var(--md-sys-color-primary)

        & > svg.m3-svg-icon
            fill: var(--md-sys-color-primary)

    &.elevated
        @include elevation-1(false)

        color: var(--md-sys-color-primary)
        background-color: var(--md-sys-color-surface-container-low)

        & > svg.m3-svg-icon
            fill: var(--md-sys-color-primary)

    &.tonal
        color: var(--md-sys-color-on-secondary-container)
        background-color: var(--md-sys-color-secondary-container)

        & > svg.m3-svg-icon
            fill: var(--md-sys-color-on-secondary-container)

    &.filled > span.m3.m3-ripple-domain > span.m3.ripple
        background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)

    &:is(.outlined, .text, .elevated)
        & > span.m3.m3-ripple-domain > span.m3.ripple
            background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)

    &.tonal > span.m3.m3-ripple-domain > span.m3.ripple
        background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)

    &:active
        &:is(.filled, .tonal)
            @include elevation-0(true)

        &.elevated
            @include elevation-1(true)

        &:not(&:has(span.m3.m3-ripple-domain))
            &.outlined
                border-color: var(--md-sys-color-primary) !important

            &.filled
                background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary))

            &:is(.outlined, .text, .elevated)
                background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)

            &.tonal
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container))

    &:focus-visible
        &.outlined
            border-color: var(--md-sys-color-primary) !important

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

        &:is(.outlined, .text, .elevated)
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)

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

    &:hover
        &:is(.filled, .tonal)
            @include elevation-1(false)

        &.elevated
            @include elevation-2(false)

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

        &:is(.outlined, .text, .elevated)
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)

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

    &:disabled
        pointer-events: none

        &:is(.filled, .elevated, .tonal, .outlined, .text)
            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)

        &:is(.filled, .elevated, .tonal)
            background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

        &.elevated
            box-shadow: none

        &.outlined
            outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
