@lunalytics/ui/dist/assets/alert.css

React based component library created to be used in Lunalytics

body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-alert{display:flex;border-left:.25rem solid var(--lunaui-primary-700);border-radius:.375rem;padding:.5rem 1rem;gap:.625rem;background-color:var(--lunaui-accent-800);--alert-color: var(--lunaui-primary-700);border-left-color:var(--alert-color)}.luna-alert.primary{--alert-color: var(--lunaui-primary-700)}.luna-alert.blue{--alert-color: var(--lunaui-blue-700)}.luna-alert.cyan{--alert-color: var(--lunaui-cyan-700)}.luna-alert.gray{--alert-color: var(--lunaui-gray-400)}.luna-alert.green{--alert-color: var(--lunaui-green-700)}.luna-alert.pink{--alert-color: var(--lunaui-pink-700)}.luna-alert.purple{--alert-color: var(--lunaui-purple-700)}.luna-alert.red{--alert-color: var(--lunaui-red-700)}.luna-alert.yellow{--alert-color: var(--lunaui-yellow-700)}.luna-alert-icon{display:flex;align-items:center;justify-content:center;color:var(--alert-color);gap:.3125rem}.luna-alert-icon svg{width:1.5625rem;height:1.5625rem}.luna-alert-title{display:flex;align-items:center;color:var(--alert-color);gap:.3125rem}.luna-alert.solid{color:var(--lunaui-text-color);background-color:var(--alert-color)}.luna-alert.solid .alert-container-title,.luna-alert.solid .alert-container-icon{color:var(--lunaui-text-color)}.luna-alert.light{color:var(--alert-color);background-color:color-mix(in srgb,var(--alert-color),transparent 80%);border-top:.0625rem solid var(--alert-color);border-right:.0625rem solid var(--alert-color);border-bottom:.0625rem solid var(--alert-color)}.luna-alert.light .alert-container-title,.luna-alert.light .alert-container-icon{color:var(--alert-color)}.luna-alert.flat{color:var(--alert-color);background-color:transparent;border-top:.0625rem solid var(--alert-color);border-right:.0625rem solid var(--alert-color);border-bottom:.0625rem solid var(--alert-color)}.luna-alert.flat .alert-container-title,.luna-alert.flat .alert-container-icon{color:var(--alert-color)}.luna-alert.shadow{color:var(--lunaui-text-color);background-color:var(--alert-color);box-shadow:0 2px 8px var(--alert-color)}.luna-alert.shadow .alert-container-title,.luna-alert.shadow .alert-container-icon{color:var(--lunaui-text-color)}