@use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; @use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; @use 'iro-sass/src/props'; @use '../core.vars' as core; @forward 'badge.vars'; @use 'badge.vars' as vars; @mixin -apply-theme($theme, $key: (), $static: false) { color: props.get($theme, list.join($key, --label)...); background-color: props.get($theme, list.join($key, --bg)...); &:link, &:visited, &:enabled { &:hover, &:focus-visible { color: props.get($theme, list.join($key, --hover --label)...); background-color: props.get($theme, list.join($key, --hover --bg)...); } &:active { color: props.get($theme, list.join($key, --active --label)...); background-color: props.get($theme, list.join($key, --active --bg)...); } } @include iro.bem-modifier('quiet') { color: props.get($theme, list.join($key, --quiet --label)...); background-color: props.get($theme, list.join($key, --quiet --bg)...); &:link, &:visited, &:enabled { &:hover, &:focus-visible { color: props.get($theme, list.join($key, --quiet --hover --label)...); background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); } &:active { color: props.get($theme, list.join($key, --quiet --active --label)...); background-color: props.get($theme, list.join($key, --quiet --active --bg)...); } } } @if $static { &::after { outline-color: props.get($theme, list.join($key, --key-focus --border)...); box-shadow: 0 0 0 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) props.get($theme, list.join($key, --key-focus --outline)...); } } } @mixin styles { @include props.materialize(meta.module-variables('vars')); @include iro.bem-object('badge') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); font-size: props.get(vars.$font-size); line-height: props.get(core.$font--standard--line-height); text-align: center; text-decoration: none; background-clip: padding-box; border-radius: props.get(vars.$rounding); &::after { position: absolute; inset: calc(-1 * props.get(vars.$key-focus--border-offset)); z-index: 1; display: none; pointer-events: none; content: ''; border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); outline: transparent solid props.get(vars.$key-focus--border-width); } &:link, &:visited, &:enabled { &:focus-visible { &::after { display: block; } } } @include iro.bem-elem('label') { margin-inline: props.get(vars.$pad-i-label); } @include -apply-theme(vars.$default-theme, $static: true); @each $theme in map.keys(props.get(vars.$themes)) { @include iro.bem-modifier(string.slice($theme, 3)) { @include -apply-theme(vars.$themes, $theme); } } @each $theme in map.keys(props.get(vars.$static-themes)) { @include iro.bem-modifier(string.slice($theme, 3)) { @include -apply-theme(vars.$static-themes, $theme, true); } } @include iro.bem-modifier('pill') { padding-inline: props.get(vars.$pad-i-pill); border-radius: 10em; &::after { border-radius: 10em; } } @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { @include iro.bem-modifier($mod) { padding-block: props.get($pad-b); padding-inline: props.get($pad-i); font-size: props.get($font-size); @include iro.bem-elem('label') { margin-inline: props.get($pad-i-label); } @include iro.bem-modifier('pill') { padding-inline: props.get($pad-i-pill); } } } } }