@define-color cc-bg #eff1f5;
@define-color noti-border-color #bb9af7;
@define-color noti-bg #eff1f5;
@define-color noti-bg-darker #acb0be;
@define-color noti-bg-hover #acb0be;
@define-color noti-bg-focus #bcc0cc;
@define-color noti-close-bg #dcd7ba;
@define-color noti-close-bg-hover #dcd7ba;
@define-color text-color #4c4f69;
@define-color text-color-disabled #4c4f69;
@define-color bg-selected #7e9cd8;
@define-color border-green #76946a;
@define-color red-base #d20f39;
@define-color red-hover #e46876;
@define-color green-base #40a02b;
@define-color blue-base #1e66f5;

* {
  font-family: "JetBrainsMono NFM SemiBold", monospace;
  border-radius: 0;
}

.control-center .notification-row:focus,
.control-center .notification-row:hover {
  opacity: 1;
  background: @noti-bg-darker;
}

.notification-row {
  outline: none;
  margin: 0;
  padding: 0;
}

.notification,
.notification-content,
.notification-action,
.notification-default-action,
.inline-reply-entry,
.inline-reply-button,
.widget-title,
.widget-title>button,
.widget-dnd,
.widget-dnd>switch,
.widget-dnd>switch slider,
.widget-label>label,
.widget-buttons-grid,
.widget-buttons-grid>flowbox>flowboxchild>button,
.widget-volume,
.widget-backlight,
.widget-mpris,
.widget-mpris>box>button,
.widget-mpris-player,
.widget-mpris-album-art {
  border-radius: 0;
}

.notification {
  background: @cc-bg;
  border: 2px solid @border-green;
  margin: 3px -2px 3px 0;
}

.close-button {
  background: @red-base;
  color: @cc-bg;
  text-shadow: none;
  padding: 0;
  margin-top: 5px;
  margin-right: 5px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  border-radius: 0;
  border: none;
}

.notification:hover .close-button {
  opacity: 1;
}

.close-button:hover {
  background: @red-hover;
  box-shadow: none;
  transition: all 0.15s ease-in-out;
}

.notification-action {
  border: 2px solid @border-green;
}

.notification-default-action:hover,
.notification-action:hover {
  color: @blue-base;
  background: @cc-bg;
}

.inline-reply-entry {
  background: @noti-bg-darker;
  color: @text-color;
  caret-color: @text-color;
  border: 1px solid @noti-border-color;
}

.inline-reply-button {
  margin-top: 4px;
  margin-left: 4px;
  background: @noti-bg;
  border: 1px solid @noti-border-color;
  color: @text-color;
}

.inline-reply-button:disabled {
  background: transparent;
  color: @text-color-disabled;
  border: 1px solid transparent;
}

.inline-reply-button:hover {
  background: @noti-bg-hover;
}

.summary {
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  color: @green-base;
  text-shadow: none;
}

.time {
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  color: @text-color;
  text-shadow: none;
  margin-right: 18px;
}

.body {
  font-size: 15px;
  font-weight: 400;
  background: transparent;
  color: @text-color;
  text-shadow: none;
}

.control-center {
  background: @cc-bg;
  border: 2px solid @border-green;
}

.widget-title {
  color: @blue-base;
  background: @noti-bg-darker;
  padding: 5px 10px;
  margin: 10px;
  font-size: 1.5rem;
}

.widget-title>button {
  font-size: 1rem;
  color: @text-color;
  background: @noti-bg;
  box-shadow: none;
}

.widget-title>button:hover {
  background: @red-base;
  color: @cc-bg;
}

.widget-dnd {
  background: @noti-bg-darker;
  padding: 5px 10px;
  margin: 5px 10px;
  font-size: large;
  color: @blue-base;
}

.widget-dnd>switch {
  background: @blue-base;
  border-radius: 0;
}

.widget-dnd>switch:checked {
  background: @red-base;
  border: 1px solid @red-base;
}

.widget-label>label {
  font-size: 1rem;
  color: @text-color;
  margin: 10px;
}

.widget-buttons-grid {
  font-size: x-large;
  padding: 5px;
  margin: 0px 10px 10px 10px;
  background: @noti-bg-darker;
}

.widget-buttons-grid>flowbox>flowboxchild>button {
  margin: 3px;
  padding: 4px 30px;
  background: @cc-bg;
  color: @text-color;
  transition: background-color 0.15s ease-in-out;
}

.widget-buttons-grid>flowbox>flowboxchild>button:hover {
  background: @blue-base;
  color: @cc-bg;
}

.widget-buttons-grid>flowbox>flowboxchild>button:checked {
  background: @green-base;
  color: @cc-bg;
}

.widget-volume,
.widget-backlight {
  background: @noti-bg-darker;
  padding: 5px;
  margin: 5px 10px;
  font-size: 2rem;
  color: @blue-base;
}

.widget-mpris {
  color: @text-color;
  background: @noti-bg-darker;
  margin: 0px 10px 10px 10px;
  box-shadow: none;
}

.widget-mpris>box>button,
.widget-mpris-player,
.widget-mpris-album-art {
  border-radius: 0;
  box-shadow: none;
  margin: 10px;
}

picture.mpris-background {
  opacity: 0;
}

.notification-action>button {
  color: @text-color;
  border-radius: 0px;
}

.notification-action>button:hover {
  background-color: @border-green;
  color: @cc-bg;
}