$rosewater: #f5e0dc; $flamingo: #f2cdcd; $pink: #f5c2e7; $mauve: #cba6f7; $red: #f38ba8; $maroon: #eba0ac; $peach: #fab387; $yellow: #f9e2af; $green: #a6e3a1; $teal: #94e2d5; $sky: #89dceb; $sapphire: #74c7ec; $blue: #89b4fa; $lavender: #b4befe; $text: #cdd6f4; $subtext1: #bac2de; $subtext0: #a6adc8; $overlay2: #9399b2; $overlay1: #7f849c; $overlay0: #6c7086; $surface2: #585b70; $surface1: #45475a; $surface0: #313244; $base: #1e1e2e; $mantle: #181825; $crust: #11111b; window.Notifications { box.Notification { margin: .25rem 1rem; border: 1px solid $blue; border-radius: 5px; min-width: 300px; background-color: $base; separator { background: $blue; } &.low { border-color: $overlay1; separator { background: $overlay1; } } &.critical { border-color: $red; separator { background: $red; } } &:first-child { margin-top: 1rem; } &:last-child { margin-bottom: 1rem; } box.Header { label.Application { margin-top: .25rem; margin-left: .5rem; color: $text; font-weight: bold; } label.Time { margin: .25rem .25rem 0 1rem; color: $subtext1; } button.Close { margin: 0; border: 0; border-radius: 0; padding: 5px; min-width: 0; min-height: 0; background: none; image { background-color: $red; border-radius: 50%; color: $red; } } } box.Contents { margin: .5rem; label.Summary { color: $text; font-weight: bold; } label.Body { color: $subtext1; } } box.Actions { button { margin: 0 .25rem; border: 0; border-radius: 0; padding: 5px; min-width: 0; min-height: 0; background: none; color: $text; font-weight: bold; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } } } }