public-ui-kolibri

@use '../mixins/to-rem' as *; @mixin kol-alert { display: block; width: 100%; } @mixin kol-input-error-with-kol-alert-wc-error($color: null) { color: var($color); font-weight: 700; } @mixin kol-alert-theme { .kol-alert { $root: &; background-color: var(--color-light); display: flex; width: 100%; overflow: unset; &--variant-msg { align-items: start; } &--variant-card { filter: drop-shadow(0 to-rem(2) to-rem(4) rgb(8, 35, 48, 0.24)); border-radius: var(--border-radius); flex-direction: column; border: var(--border-width) solid var(--alert-accent-color); } &--type-default { --alert-accent-color: var(--color-subtle); } &--type-error { --alert-accent-color: var(--color-danger); } &--type-info { --alert-accent-color: var(--color-primary); } &--type-success { --alert-accent-color: var(--color-success); } &--type-warning { --alert-accent-color: var(--color-warning); } &__container { display: flex; gap: 0.5em; place-items: center; @at-root #{$root}--variant-card & { background-color: var(--alert-accent-color); padding: to-rem(8) to-rem(16); } } &__container-content { display: grid; gap: to-rem(4); @at-root #{$root}--variant-card & { width: 100%; min-height: to-rem(20); } } &__closer { place-self: center; .kol-button { border-radius: 50%; // visible on focus width: var(--a11y-min-size); height: var(--a11y-min-size); cursor: pointer; @at-root #{$root}--variant-msg & { color: var(--alert-accent-color); } @at-root #{$root}--variant-card & { color: var(--color-light); } } .kol-icon { font-size: to-rem(19.2); } } &__heading { @at-root #{$root}--variant-msg & { color: var(--alert-accent-color); padding-top: calc(--var-spacing / 2); } @at-root #{$root}--variant-card & { color: var(--color-light); display: flex; width: 100%; font-size: to-rem(20); line-height: 1; } } &__icon { color: var(--color-light); padding: 0; @at-root #{$root}:not(#{$root}--type-default) & { font-size: to-rem(20); } @at-root #{$root}--variant-msg & { color: var(--alert-accent-color); place-items: baseline; } @at-root #{$root}--variant-card & { margin-top: to-rem(-4); justify-self: right; } } &__content { @at-root #{$root}--variant-card & { padding: to-rem(16); } } } }