@import "mixins/m3-mixins"

button:not(.m3-fab, .m3-icon-button)
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
    font-family: var(--md-sys-typescale-label-large-font-family-name)
    font-size: var(--md-sys-typescale-label-large-font-size)
    font-weight: var(--md-sys-typescale-label-large-font-weight)
    line-height: var(--md-sys-typescale-label-large-line-height)
    box-sizing: border-box

    &.m3
        contain: content
        box-sizing: border-box
        border-radius: 100px
        display: inline-flex
        flex-direction: row
        justify-content: center
        align-items: center
        text-align: center
        padding: 10px 24px
        border: none
        gap: 8px

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

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

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

    &.text
        padding: 10px 12px !important
        background-color: #00000000
        color: var(--md-sys-color-primary)

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

    &.elevated
        @include elevation-1(false)
        background-color: var(--md-sys-color-surface-container-low)
        color: var(--md-sys-color-primary)

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

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

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

    &::before
        @include state-layer

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

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

    &.tonal > .m3.m3-ripple-domain > .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)

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

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

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

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

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

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

        &.elevated
            @include elevation-2(false)

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

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

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

    &: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