@use "sass:color";
@use "../../../assets/sass/tools/v7/typography" as *;
@use "../../../assets/sass/settings/v7/colors.tokens" as *;

.c-notification {
  --notification-background: var(--background-color);
  --notification-border: var(--divider-color);
  &:empty,
  &:has(input[type="hidden"]:only-child){
    display: none;
  }
  &{
    background-color: var(--notification-background);
    border-left: 3px solid var(--notification-border);
  }
  ul > li::marker {
    color: var(--notification-border);
  }
  @include type(body-04);
  &--infos {
    --notification-background: #{rgba($color-blue, .2)};
    --notification-border: #{$color-blue};
  }
  &--warning {
    --notification-background: #{rgba($color-warning, .4)};;
    --notification-border: #{$color-warning};
  }
  &--error {
    --notification-background: #{rgba($color-red, .2)};
    --notification-border: #{$color-red};
  }
  &--success {
    --notification-background: #{rgba($color-green, .3)};
    --notification-border: #{$color-green};
  }
}
script[type="text/blackstone+encrypted"][data-encrypted--error]::before{
  --notification-background: #{rgba($color-red, .2)};
  --notification-border: #{$color-red};
  font-size: 0.875rem !important;
  line-height: calc(1em + 4px);
  font-family: var(--font-sans-grotesk);
  font-weight: 400;
  background-color: var(--notification-background);
  border-left: 3px solid var(--notification-border);
  padding: 1rem;
  display: block;
  color: var(--body-color) !important;
}