@import "card"
@import "icon"
@import "badge"
@import "fonts"
@import "ripple"
@import "divider"
@import "container"

@import "mixins/m3-mixins"

@import "button-styles/fabs"
@import "button-styles/button"
@import "button-styles/icon-button"
@import "button-styles/segmented-button"

@import "input-styles/radio"
@import "input-styles/slider"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"

@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)

html
    font-family: Roboto, serif
    color: var(--md-sys-color-on-surface)
    background-color: var(--md-sys-color-surface-container)

.m3.m3-wrapper
    position: relative
    display: block
    background-color: var(--md-sys-color-surface)
    border-radius: 25px

button:not(.m3-fab, .m3-icon-button)
    @include m3-typography-mixin('label-large')

    max-height: 40px
    width: min-content
    white-space: nowrap
    height: min-content
    box-sizing: border-box
    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important

    &.m3
        @include center(inline-flex)

        gap: 8px
        border: none
        contain: content
        text-align: center
        padding: 10px 24px
        flex-direction: row
        border-radius: 100px
        box-sizing: border-box