@use 'sass:math'; @use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; @use '../props'; @use '../core.vars' as core; @forward 'implicit.vars'; @use 'implicit.vars' as vars; @mixin styles { @include props.materialize(meta.module-variables('vars')); html { accent-color: props.get(core.$theme, --accent, --600); scrollbar-color: props.get(core.$theme, --text-disabled) transparent; } html, body { block-size: 100%; } body { //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); padding: 0; margin: 0; color: props.get(core.$theme, --text); background-color: props.get(core.$theme, --bg-base); } pre, code { font-family: props.get(vars.$code--font-family); font-size: props.get(vars.$code--font-size); font-feature-settings: props.get(vars.$code--feature-settings); line-height: props.get(vars.$code--line-height); } pre { margin: 0; overflow-x: auto; code { font-size: 1em; color: currentColor; } } h1, h2, h3, h4, h5, h6 { margin-block: props.get(vars.$heading--margin-bs) 0; font-family: props.get(vars.$heading--font-family); font-weight: props.get(vars.$heading--font-weight); font-feature-settings: props.get(vars.$heading--feature-settings); line-height: props.get(vars.$heading--line-height); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); } } p { margin-block: props.get(vars.$paragraph--margin-bs) 0; &:empty { display: none; } } strong { font-weight: bold; } small { font-size: props.get(vars.$small--font-size); } ul, ol { padding: 0; margin: 0; list-style: none; } li { padding: 0; margin: 0; } :focus, :focus-visible { outline: 0; } :link, :visited { color: currentColor; text-decoration: none; } button, input, textarea { box-sizing: content-box; padding: 0; margin: 0; font-family: inherit; font-size: 1em; font-style: inherit; font-weight: inherit; line-height: inherit; color: currentColor; text-align: inherit; text-transform: inherit; appearance: none; background: none; border: 0; &::-moz-focus-inner { border: 0; } } input, textarea { &::placeholder { color: props.get(core.$theme, --text-mute); opacity: 1; } &:disabled { color: props.get(core.$theme, --text-disabled); } } textarea { block-size: calc(1em * props.get(core.$font--standard--line-height)); } hr { block-size: props.get(core.$border-width--thin); margin: 0; background-color: props.get(core.$theme, --border-color); border: 0; } }