@define-color bg #0f0b15;
@define-color bg-secondary #1d202f;
@define-color fg #ffffff;
@define-color fg_alt #bf8a9f;
@define-color fg_dim #807c9f;
@define-color bg #0f0b15;
@define-color bg_secondary #1d202f;
@define-color grey #807c9f;
@define-color grey_bright #807c9f;
@define-color red #f47359;
@define-color red_bright #ff6a7a;
@define-color red_subtle_bg #67182f;
@define-color green #29a444;
@define-color green_bright #00a392;
@define-color green_subtle_bg #10452f;
@define-color yellow #b58a52;
@define-color yellow_bright #df9080;
@define-color yellow_brighter #FCC1B6;
@define-color yellow_subtle_bg #54362a;
@define-color blue #3f95f6;
@define-color blue_bright #029fff;
@define-color blue_subtle_bg #2a346e;
@define-color blue_subtle_dark_bg #003045;
@define-color magenta #d369af;
@define-color magenta_bright #af85ea;
@define-color magenta_brighter #c57faf;
@define-color magenta_subtle_bg #572454;
@define-color magenta_subtle_bg_darker #331531;
@define-color cyan #4fbaef;
@define-color cyan_bright #35afbf;
@define-color cyan_subtle_bg #133d56;
@define-color silver #b8c6d5;
@define-color silver_bright #ffffff;

* {
  font-family: "VictorMono NF SemiBold";
}

notificationwindow, blankwindow, blankwindow {
  background: transparent;
}

.close-button {
  /* The notification Close Button */
  background: @magenta_subtle_bg_darker;
  color: @magenta_brighter;
  text-shadow: none;
  padding: 0;
  border-radius: 100%;
  margin-top: 16px;
  margin-right: 16px;
  box-shadow: none;
  border: none;
  min-width: 24px;
  min-height: 24px;
}

.close-button:hover {
  box-shadow: none;
  background: @red_subtle_bg;
  color: @red_bright;
  border: none;
}

.notification-row {
  background: none;
  outline: none;
}

.notification-row:focus {
  background-color: @bg_secondary;
}

.notification-row .notification-background {
  padding: 0;
  background: transparent;
}

.notification-row .notification-background .notification {
  /* The actual notification */
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  margin: 8px;
  background-color: @bg_secondary;
}

.notification-row .notification-background .notification:hover {
  background-color: @bg_secondary;
}

.notification-row .notification-background .notification.low {
  /* Low Priority Notification */
}

.notification-row .notification-background .notification.normal {
  /* Normal Priority Notification */
}

.notification-row .notification-background .notification.critical {
  /* Critical Priority Notification */
}

.notification-row .notification-background .notification .notification-default-action {
  /* The large action that also displays the notification summary and body */
  padding: 4px;
  margin: 0;
  box-shadow: none;
  background: transparent;
  border: none;
  color: @fg;
  border-radius: 12px;
}

.notification-row .notification-background .notification .notification-default-action:hover {
  -gtk-icon-filter: none;
  background-color: @bg_secondary;
}

.notification-row .notification-background .notification .notification-default-action:not(:only-child) {
  /* When alternative actions are visible */
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content {
  background: transparent;
  border-radius: 12px;
  padding: 0;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .image {
  /* Notification Primary Image */
  -gtk-icon-filter: none;
  -gtk-icon-size: 24px;
  border-radius: 100px;
  /* Size in px */
  margin: 4px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
  /* Notification app icon (only visible when the primary image is set) */
  -gtk-icon-filter: none;
  -gtk-icon-size: 24px;
  -gtk-icon-shadow: 0 1px 4px black;
  margin: 6px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .text-box label {
  /* Fixes base GTK 4 CSS setting a filter of opacity 50% for some odd reason */
  filter: none;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary {
  /* Notification summary/title */
  font-size: 1.2rem;
  margin-top: 6px;
  margin-left: 6px;
  font-weight: bold;
  background: transparent;
  color: @fg;
  text-shadow: none;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time {
  /* Notification time-ago */
  margin-top: 8px;
  font-size: 1rem;
  font-weight: normal;
  background: transparent;
  color: @fg_dim;
  text-shadow: none;
  margin-right: 32px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body {
  /* Notification body */
  margin-top: 4px;
  margin-bottom: 6px;
  margin-left: 6px;
  font-size: 1rem;
  font-weight: normal;
  background: transparent;
  color: @fg_dim;
  text-shadow: none;
}

.notification-row .notification-background .notification .notification-default-action .notification-content progressbar {
  /* The optional notification progress bar */
  margin-top: 4px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .body-image {
  /* The "extra" optional bottom notification image */
  margin-top: 4px;
  background-color: white;
  -gtk-icon-filter: none;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply {
  /* The inline reply section */
  margin-top: 4px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry {
  background: @bg;
  color: @green_bright;
  caret-color: @green_bright;
  border: @green_subtle_bg;
  border-radius: 12px;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
  margin-left: 4px;
  background: @green_subtle_bg;
  border: green_subtle_bg;
  border-radius: 12px;
  color: @green_bright;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
  background: initial;
  color: @grey;
  border: 2px solid;
  border-color: transparent;
}

.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
  background: @bg_secondary;
}

.notification-row .notification-background .notification .notification-alt-actions {
  background: none;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding: 4px;
}

.notification-row .notification-background .notification .notification-action {
  /* The alternative actions below the default action */
  margin: 4px;
  padding: 0;
}

.notification-row .notification-background .notification .notification-action > button {
  border-radius: 12px;
  color: @fg;
}

.notification-group {
  margin: 0;
  padding: 0;
}

.notification-group:focus {
  background: @bg;
}

.notification-group.low {
  /* Low Priority Group */
}

.notification-group.normal {
  /* Low Priority Group */
}

.notification-group.critical {
  /* Low Priority Group */
}

.notification-group .notification-group-close-button .close-button {
}

.notification-group .notification-group-buttons, .notification-group .notification-group-headers {
  margin: 0 10px 4px 10px;
  color: @fg;
}

.notification-group .notification-group-headers {
  /* Notification Group Headers */
}

.notification-group .notification-group-headers .notification-group-header {
  font-size: 1.1rem;
  font-weight: bold;
}

.notification-group .notification-group-headers .notification-group-icon {
  margin-top: 2px;
  color: @fg_dim;
  -gtk-icon-size: 24px;
}

.notification-group .notification-group-buttons {
  /* Notification Group Buttons */
  background-color: @bg;
  color: @fg_dim;
}

.notification-group.collapsed {
  /* When another group is expanded, lower the opacity of the collapsed ones */
}

.notification-group.collapsed.not-expanded {
  opacity: 0.4;
}

.notification-group.collapsed .notification-row .notification {
  background-color: @bg_secondary;
}

.notification-group.collapsed .notification-row:not(:last-child) {
  /* Top notification in stack */
  /* Set lower stacked notifications opacity to 0 */
}

.notification-group.collapsed .notification-row:not(:last-child) .notification-action,
.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action {
  opacity: 0;
}

.notification-group.collapsed:hover .notification-row:not(:only-child) .notification {
  background-color: @bg_secondary;
}

.control-center {
  /* The Control Center which contains the old notifications + widgets */
  background-color: @bg; 
  border-radius: 0;
  color: @fg;
  opacity: 0.95;
}

.control-center .control-center-list-placeholder {
  /* The placeholder when there are no notifications */
  opacity: 0;
}

.control-center .control-center-list {
  /* List of notifications */
  background: transparent;
}

.control-center .control-center-list .notification {
  box-shadow: none;
  border: 2px solid @magenta_subtle_bg;
}

.control-center .control-center-list .notification .notification-default-action,
.control-center .control-center-list .notification .notification-action {
}

.control-center .control-center-list .notification .notification-default-action:hover,
.control-center .control-center-list .notification .notification-action:hover {
  background-color: @bg_secondary;
}

.blank-window {
  /* Window behind control center and on all other monitors */
  background: transparent;
}

.floating-notifications {
  background: transparent;
}

.floating-notifications .notification {
  box-shadow: none;
}

.widget-mpris {
  padding: 0;
  opacity: 1;
}

.widget-mpris .widget-mpris-player {
  margin-bottom: 12px;
  border-radius: 12px;
  border: 2px solid @magenta_subtle_bg_darker;
}

.widget-mpris .widget-mpris-player .mpris-background {
  filter: blur(10px);
}

.widget-mpris .widget-mpris-player .mpris-overlay {
  padding: 12px;
}

.widget-mpris .widget-mpris-player .mpris-overlay button:hover {
  /* The media player buttons (play, pause, next, etc...) */
  background: @magenta_subtle_bg_darker;
  color: @magenta_brighter;
}

.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art {
  border-radius: 8px;
  -gtk-icon-size: 64px;
}

.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-title {
  font-weight: bold;
  font-size: 1.25rem;
}

.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-subtitle {
  font-size: 1.1rem;
  color: @fg_alt;
}

.widget-mpris .widget-mpris-player .mpris-overlay > box > button {
  /* Change player control buttons */
  color: @fg;
}

.widget-mpris .widget-mpris-player .mpris-overlay > box > button:hover {
  background-color: @magenta_subtle_bg_darker;
}

.widget-mpris > box > button {
  /* Change player side buttons */
}

.widget-mpris > box > button:disabled {
  /* Change player side buttons insensitive */
  color: @grey;
}

.widget-title > label {
  margin-top: 8px;
  margin-left: 12px;
  font-size: 1.8rem;
  font-weight: bold;
  color: @fg;
}

/* .widget-buttons-grid { */
/*   padding: 0 20px 12px 20px; */
/* } */

.widget-buttons-grid flowboxchild > button {
  padding: 12px 0;
  margin: 8px;
  background-color: @magenta;
  color: @fg;
  opacity: 1;
}

.widget-buttons-grid flowboxchild > button:hover {
  padding: 12px 0;
  background-color: @magenta;
  box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.8);
  transition: none;
  color: @fg;
}

.widget-buttons-grid flowboxchild > button.toggle:checked {
  /* style given to the active toggle button */
}