* {
  color: @fg;
  font-family: JetBrains Mono;
  font-size: 11px;
}

@define-color bg_dim #232a2e;
@define-color bg0 #2d353b;
@define-color bg1 #343f44;
@define-color bg2 #3d484d;
@define-color bg3 #475258;
@define-color fg #d3c6aa;
@define-color grey2 #9da9a0;
@define-color green #a7c080;
@define-color blue #7fbbb3;

.notification-group,
.notification-background,
.notification-content,
.notification-default-action,
.notification-alt-actions,
.summary,
.time,
.body,
.control-center-list,
.floating-notifications,
.blank-window {
  background-color: transparent;
}
.floating-notifications .notification {
  margin-right: 6px;
}

.notification-group .notification-group-buttons,
.notification-group .notification-group-headers {
  margin: 2px 2px 4px 2px;
  padding: 0;
}
.notification-group .notification-group-buttons > button,
.notification-group .notification-group-headers > button {
  margin-left: 2px;
  padding: 0;
  min-width: 24px;
  min-height: 24px;
  background: @bg1;
}
.notification-group .notification-group-buttons > button:hover {
  background-color: @bg2;
}
.notification-group .notification-group-buttons > button:active {
  background-color: @bg3;
}
.notification-row {
  margin-top: 3px;
  outline: none;
  border-radius: 6px;
}
.notification-background {
  padding: 4px 2px;
}
.notification {
  padding: 4px 8px;
  border: 2px solid @green;
  border-radius: 6px;
  background-color: @bg0;
  box-shadow: none;
}
.notification-default-action {
  margin: 0;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
}
.notification-default-action:not(:only-child) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.notification-content {
  margin: 4px 0px;
  padding: 4px 0px;
}
.image {
  margin: 0px 16px 0px 0;
  border-radius: 6px;
}
.app-icon {
  margin: 4px 8px 4px 0px;
}
.summary {
  font-weight: bold;
}
.time {
  color: @blue;
}
.body {
  color: @fg;
  font-weight: normal;
}
.notification-alt-actions {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.notification-action {
  min-height: 24px;
  min-width: 24px;
  background-color: transparent;
}
.notification-action > button {
  border: none;
  border-radius: 6px;
  background-color: @bg2;
}
.notification-action > button:hover {
  background: @green;
  color: @bg_dim;
}

.close-button {
  margin: 8px;
  padding: 0;
  border: none;
  border-radius: 100%;
  min-width: 24px;
  min-height: 24px;
  background: @bg1;
  box-shadow: none;
}
.close-button:hover {
  background: @bg2;
}
.close-button:active {
  background: @bg3;
}
.notification-group .notification-group-close-button .close-button {
  margin: 15px 10px;
}

.floating-notifications .close-button {
  margin: 8px 14px;
}

.control-center {
  border-left: 2px solid @grey2;
  border-radius: 0px;
  background: @bg_dim;
}
.control-center-list-placeholder {
  opacity: 0.5;
}
.widget-title {
  margin: 8px 8px 3px 8px;
  padding-left: 8px;
  border-radius: 6px;
  background: @bg1;
}
.widget-title > button {
  border: none;
  border-radius: 6px;
  background: @bg1;
  box-shadow: none;
}
.widget-title > button:hover {
  background: @bg2;
  color: @bg1;
}
.widget-title > button:active {
  background: @bg3;
}
.widget-mpris {
  margin: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: @bg1;
}
.widget-mpris > box > button {
  margin: 4px 0;
  border-radius: 6px;
  background: @bg1;
}
.widget-mpris > box > button:hover {
  background: @bg2;
}
.widget-mpris > box > button:active {
  background: @bg3;
}
.widget-mpris-player {
  margin: 4px 8px 4px 8px;
  padding: 4px 8px;
  border: 2px solid @grey2;
  border-radius: 6px;
  color: @fg;
  box-shadow: none;
}
.widget-mpris .widget-mpris-player .mpris-overlay {
  padding: 16px;
  background-color: transparent;
}
.widget-mpris .widget-mpris-player .mpris-overlay button:hover {
  background: @bg2;
}
.widget-mpris .widget-mpris-player .mpris-overlay button:active {
  background: @bg3;
}
.widget-mpris-album-art {
  border-radius: 6px;
  box-shadow: none;
}
.widget-buttons-grid {
  margin: 8px;
  padding: 4px 9px;
  border-radius: 6px;
  background: @bg1;
}
.widget-buttons-grid > flowbox > flowboxchild > button {
  margin: 1px 4px;
  padding: 5px;
  border-radius: 6px;
  background: @bg2;
}
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
  background: @green;
}
.widget-buttons-grid > flowbox > flowboxchild > button:hover label {
  color: @bg2;
}
.widget-buttons-grid > flowbox > flowboxchild > button:checked {
  background: @green;
}
.widget-buttons-grid > flowbox > flowboxchild > button:checked label {
  color: @bg2;
}
.widget-menubar > box > .menu-button-bar > button {
  border: none;
  background: transparent;
}
.topbar-buttons > button {
  border: none;
  background: transparent;
}
scrollbar {
  background: transparent;
}
scrollbar slider {
  margin: 0;
  background: @bg1;
}
scrollbar slider:hover {
  background: @bg2;
}
scrollbar slider:active {
  background: @bg3;
}
