@mixin m3-label-mixin
    display: flex
    position: relative
    align-items: center
    justify-content: center
    aspect-ratio: 1

@mixin m3-state-layer-mixin
    position: absolute
    width: 2.5rem
    aspect-ratio: inherit
    border-radius: 50%
    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
    width: $width
    height: $height
    border-radius: $b-radius
    padding: $padding

@mixin m3-fab-colors-palette($bg-color, $color)
    &:not(.without-elevation)
        @include elevation-3(false)
    background-color: var($bg-color)
    color: var($color)
    & > svg.m3-svg-icon
        fill: var($color)
    & > .m3.m3-ripple-domain > .m3.ripple
        background: color-mix(in srgb, var($color) 12%, transparent)

@mixin elevation-0($important)
    @if $important == true
        box-shadow: none !important
    @else
        box-shadow: none

@mixin elevation-1($important)
    @if $important == true
        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
    @else
        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)

@mixin elevation-2($important)
    @if $important == true
        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
    @else
        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)

@mixin elevation-3($important)
    @if $important == true
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
    @else
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)

@mixin elevation-4($important)
    @if $important == true
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
    @else
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)

@mixin elevation-5($important)
    @if $important == true
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
    @else
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)

@mixin state-layer
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
    content: ""
    top: 0
    bottom: 0
    left: 0
    right: 0
    position: absolute
    background: #00000000