@mixin center($display)
    display: $display
    align-items: center
    justify-content: center

@mixin m3-checkbox-container-mixin
    gap: 16px
    height: 40px
    display: flex
    aspect-ratio: 1
    position: relative
    align-items: center
    justify-content: center

@mixin m3-typography-mixin($type)
    font-size: var(--md-sys-typescale-#{$type}-font-size)
    font-weight: var(--md-sys-typescale-#{$type}-font-weight)
    line-height: var(--md-sys-typescale-#{$type}-line-height)
    font-family: var(--md-sys-typescale-#{$type}-font-family-name)
    letter-spacing: var(--md-sys-typescale-#{$type}-letter-spacing)

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

@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 m3-buttons-state-layer-mixin
    width: 100%
    height: 100%
    position: absolute
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
