@mixin notification() {
  $notification: settings($settings, "define.notification.class");
  #{$notification} {
    display: inline-block;
    padding: space(0.5);
    background-color: value(accent);
    border-radius: value(border-radius);
    color: value(current);

    @each $name, $color in $color-palette-defined {
      &--#{to-lower-case($name)} {
        //   background-color: $color;
        //   @include color-background($name, $color);

        border: 1px solid $color;
        background-color: to-lightness($color, 75);
        color: to-lightness($color, 25);
        --accent: #{to-lightness($color, 65)};
      }
      p,
      p:first-of-type {
        font-size: 1em;
      }
    }
  }
}