button.m3.m3-icon-button
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
    contain: content
    border-radius: 50%
    position: relative
    display: inline-flex
    flex-direction: row
    justify-content: center
    align-items: center
    width: 40px
    height: 40px
    border: none
    padding: 0

    &::before
        transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
        content: ""
        width: 100%
        height: 100%
        position: absolute

    & > span.m3-icon
        z-index: 25
        font-size: 2em
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48

    &.default
        &
            fill: var(--md-sys-color-on-surface-variant)
            background-color: #00000000

        &:disabled, &.selected:disabled, &.selected.toggled:disabled
            fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
            background-color: #00000000

        &.selected.toggled
            fill: var(--md-sys-color-primary)

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

        &.toggled
            fill: var(--md-sys-color-primary)
            background-color: var(--md-sys-color-surface-container-highest)

        &.selected.toggled
            fill: var(--md-sys-color-on-primary)
            background-color: var(--md-sys-color-primary)

    &.tonal
        &.toggled
            fill: var(--md-sys-color-on-surface-variant)
            background-color: var(--md-sys-color-surface-container-highest)

        &.selected.toggled, &
            fill: var(--md-sys-color-on-secondary-container)
            background-color: var(--md-sys-color-secondary-container)

    &:is(.tonal, .filled, .toggled.selected):disabled
        fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

    &.outlined
        &
            border: 1px solid var(--md-sys-color-outline)
            fill: var(--md-sys-color-on-surface-variant)
            background-color: #00000000

        &:disabled
            border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
            fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
            background-color: #00000000

        &.toggled.selected:disabled
            border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent)
            fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

        &.selected.toggled
            border: 1px solid #00000000
            background-color: var(--md-sys-color-inverse-surface)
            fill: var(--md-sys-color-inverse-on-surface)

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

    &:is(.outlined, .default):not(:disabled)
        & > .m3.m3-ripple-domain > .m3.ripple
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)

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

        &:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
            background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)

    &.tonal:not(:disabled)
        & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
        &.toggled > .m3.m3-ripple-domain > .m3.ripple
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)

    &:hover:not(:disabled)
        &:is(.default, .outlined)::before
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)

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

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

    &:focus-visible:not(:disabled)
        &:is(.default, .outlined)::before
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)

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

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