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

@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"
@import "./themes/colors.module"
@import "./themes/typography.module"
@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