$notification-background-color: v("background") !default
$notification-code-background-color: v("scheme-main") !default
$notification-radius: v("radius") !default
$notification-padding-vertical: 1.25rem !default
$notification-padding-right: 2.5rem !default
$notification-padding-left: 1.5rem !default
$notification-padding: $notification-padding-vertical $notification-padding-right $notification-padding-vertical $notification-padding-left !default

+register(notification-background-color, $notification-background-color, true)
+register(notification-radius, $notification-radius, true)
+register(notification-padding-vertical, $notification-padding-vertical, true)
+register(notification-padding-right, $notification-padding-right, true)
+register(notification-padding-left, $notification-padding-left, true)
+register(notification-padding, $notification-padding, true)
+register(notification-code-background-color, $notification-code-background-color, true)

.notification
  @extend %block
  background-color: v("notification-background-color")
  border-radius: v("notification-radius")
  position: relative
  +ltr-property("padding", v("notification-padding-vertical") v("notification-padding-right") v("notification-padding-vertical") v("notification-padding-left") )

  a:not(.button):not(.dropdown-item)
    color: currentColor
    text-decoration: underline

  strong
    color: currentColor

  code,
  pre
    background: v("notification-code-background-color")

  pre code
    background: transparent

  & > .delete
    +ltr-property("right", 0.5rem)
    position: absolute
    top: 0.5rem

  .title,
  .subtitle,
  .content
    color: currentColor
  // Colors
  @each $name in $colors-list
    $color: v($name)
    $color-invert: v($name+"-invert")
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      // If light and dark colors are provided
      @if isRegistered($name+"-dark")
        $color-light: v($name+"-light")
        $color-dark: v($name+"-dark")
        &.is-light
          background-color: $color-light
          color: $color-dark