@mixin m3-icon-button-state-colors($opacity)
    &:is(.default, .outlined)::before
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)

    &.outlined.selected.toggled::before
        background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)

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

    &.filled:not(.selected).toggled::before,
    &.default.selected.toggled::before
        background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)

    &.tonal::before,
    &.tonal.selected.toggled::before
        background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)

    &.tonal.toggled::before
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)

@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
    @if $border != none
        @if $border == transparent
            border: 0 solid transparent
        @else
            border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent)

    @if $fill != none
        @if $fill == transparent
            fill: $fill
        @else
            fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)

    @if $background != none
        @if $background == transparent
            background-color: $background
        @else
            background-color: color-mix(in srgb, var($background) $background-opacity, transparent)


button.m3.m3-icon-button
    @include center(inline-flex)

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

    &::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: 24px
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48

    &.default
        &, &:not(.selected).toggled
            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%)

        &.selected.toggled
            @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)

        &:disabled,
        &.selected:disabled,
        &.selected.toggled:disabled
            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)

    &.filled
        &
            @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)

        &:not(.selected).toggled
            @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%)

        &.selected.toggled
            @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)

    &.tonal
        &:not(.selected).toggled
            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%)

        &.selected.toggled, &
            @include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%)

    &:is(.tonal, .filled, .toggled.selected):disabled
        @include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)

    &.outlined
        &
            @include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%)

        &.selected.toggled
            @include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%)

        &:disabled
            @include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%)

        &.selected.toggled:disabled
            @include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)

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

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

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

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

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

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

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

    &:hover:not(:disabled)
        @include m3-icon-button-state-colors(8%)

    &:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain)))
        @include m3-icon-button-state-colors(12%)