@define-color background      #08080b;
@define-color text            #acb0d0;
@define-color text-alt        #787c99;
@define-color background-alt  #0e0e14;
@define-color selected        alpha(@text-alt, .4);
@define-color hover           alpha(@selected, .4);
@define-color urgent          @text-alt;

* {
  color: @text;
  all: unset;
  font-size: 14px;
  font-family: "CaskaydiaCove Nerd Font Propo";
  transition: 200ms;
  font-weight: 700;
}

.notification-background {
  background: @background;
  box-shadow: none;
  border-radius: 15px;
  margin: 8px;
}

.notification {
  padding: 0 5px;
  border-radius: 15px;
  border: 2px solid @background;
}

.notification-row .inline-reply-entry {
  padding: 5px 10px;
  background: @background-alt;
  border-radius: 15px;
}

.notification-row .inline-reply-button {
  padding: 5px 10px;
  border-radius: 15px;
  background: @hover;
}

.notification-row .inline-reply .inline-reply-button:hover {
  background: @selected;
}

.notification .notification-content {
  margin: 8px 10px;
}

.notification .summary {
  font-weight: 800;
  margin-bottom: 2px;
  font-size: 1rem;
}

.notification .body {
  color: @text-alt;
  font-size: 0.8rem;
}
  
.notification .image {
  margin: 10px 20px 10px 0px;
}

.notification.critical {
  border-color: @urgent;
}

.notification.low progress,
.notification.normal progress,
.notification.critical progress {
  background: @selected;
}

.notification-background .close-button {
  margin: 6px;
  padding: 2px;
  border-radius: 6px;
  background: transparent;
}

.notification-background .close-button:hover {
  background: @hover;
}

.notification > *:last-child > * {
  min-height: 3.2em;
}

.notification > *:last-child > * .notification-action {
  background: @hover;
  margin: 0 6px 9px 6px;
  border-radius: 8px;
}

.notification > *:last-child > * .notification-action:hover {
  background: @selected;
}

.notification > *:last-child > * .notification-action:active {
  background: @selected;
}

/* ---------------------------CONTROL CENTER------------------------------------- */

.control-center {
  background: @background;
  border-radius: 15px;
  margin: 5px;
  padding: 12px;
}

.control-center .notification-background {
  background: @background-alt;
  margin: 7px 0;
}


/* I dont want to see close buttons in notification center */
.control-center .notification-background .close-button {
  opacity: 0;
}

/* Avoid 'annoying' backgroud */
.blank-window {  
  background: transparent;  
}

/* Notifications expanded-group */

.notification-group {
  margin: 0px 8px;
}

.notification-group-headers {
  font-weight: bold;
  font-size: 2rem;
  color: @text;
  letter-spacing: 2px;
}

.notification-group-icon {
  color: @text;
}

.notification-group-collapse-button,
.notification-group-close-all-button {
  background: transparent;
  color: @text;
  margin: 4px; 
  border-radius: 6px;
  padding: 4px;
}

/* WIDGETS --------------------------------------------------------------------------- */

/* Do not disturb */
.widget-dnd {
  padding: 10px 16px; 
  border-radius: 12px;
  margin: 11px 0 0;
  color: @text;
  background: @background-alt;
}

.widget-dnd > label {
  font-size: 1rem;
}

.widget-dnd switch {
  background: @hover;
  border-radius: 8px;
  box-shadow: none;
  padding: 2px;
}

.widget-dnd switch slider {
  background: @text;
  border-radius: 8px;
}

.widget-dnd switch:hover,
.widget-buttons-grid button:hover,
.control-center .notification-group-collapse-button:hover,
.control-center .notification-group-close-all-button:hover
{
  background: @hover;
}

.widget-mpris {
  background: @background-alt;
  border-radius: 15px;
  margin: 5px 0 0 0;
  padding: 0 10px; 
}

.widget-mpris-player {
  background: @background-alt;
  color: @text;
  margin: 0 5px;
  padding: 5px 0 0 0 ; 
}

.widget-buttons-grid {
  border-radius: 12px;
  padding: 6px 12px; 
  background: @background-alt;
}

.widget-buttons-grid button {
  padding: 10px 10px; 
  margin: 3px;
  background: @hover;
  border-radius: 15px;
}

.widget-buttons-grid button > label {
  font-size: 16px;
  color: @text;
}

.widget-buttons-grid button:hover {
  background: @selected;
}

.widget-buttons-grid button:checked {
  background-color: @text;
}

.widget-buttons-grid button:checked > label {
  color: @background;
}

/* Control buttons for mpris widget */
.widget-mpris-player .image-button:hover {
  border-radius: 8px;
  background: @hover;
}

.widget-mpris-album-art {
  border-radius: 16px;
  margin: 6px 4px;
}

.widget-mpris-title,
.widget-mpris-subtitle {
  font-weight: 700;
  margin: 0 3px;
} 

.widget-mpris-title {
  font-size: 1.2rem;
}
 
.widget-mpris-subtitle {
  font-size: 0.9rem;
  color: @text-alt;
}

/* Carousel indicators for mpris player */
carouselindicatordots {
  opacity: 0;
}

/* Change color for plaseholder when no notifications */
.control-center-list-placeholder {
  color: @text;
}
