button.m3.m3-common-button

    &.filled
        background-color: $primary

        &, & > svg.m3-svg-icon
            fill: $on-primary
            color: $on-primary

    &.outlined
        color: $primary
        outline-offset: -1px
        background-color: transparent
        outline: 1px solid $outline !important

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

    &.text
        color: $primary
        background-color: transparent

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

    &.elevated
        @include elevation-1(false)

        color: $primary
        background-color: $surface-container-low

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

    &.tonal
        color: $on-secondary-container
        background-color: $secondary-container

        & > svg.m3-svg-icon
            fill: $on-secondary-container

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

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

    &.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple
        background: color-mix(in srgb, $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: $primary !important

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

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

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

    &:focus-visible
        &.outlined
            border-color: $primary !important

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

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

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

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

        &.elevated
            @include elevation-2(false)

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

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

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

    &:disabled
        pointer-events: none

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

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

        &.elevated
            box-shadow: none

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