{config, ...}: {
  xdg.configFile."swaync/style.css".text = with config.lib.stylix.colors; ''
    * {
    	all: unset;
    	font-size: ${toString config.stylix.fonts.sizes.desktop}px;
    	font-family: "${config.stylix.fonts.monospace.name}";
    	transition: 200ms;
    }

    .floating-notifications.background .notification-row .notification-background {
    	border-radius: 5px;
    	border: 1px solid ${withHashtag.magenta};
    	margin: 18px;
    	background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5);
    	color: ${withHashtag.base05};
    	padding: 0;
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification {
    	padding: 7px;
    	border-radius: 5px;
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content {
    	margin: 7px;
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.summary {
    	color: ${withHashtag.base05};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.time {
    	color: ${withHashtag.base04};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.body {
    	color: ${withHashtag.base05};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> * {
    	min-height: 3.4em;
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action {
    	border-radius: 5px;
    	background-color: ${withHashtag.base01};
    	color: ${withHashtag.base05};
    	margin: 7px;
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action:hover {
    	background-color: ${withHashtag.base01};
    	color: ${withHashtag.base05};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action:active {
    	background-color: ${withHashtag.blue};
    	color: ${withHashtag.base00};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.close-button {
    	margin: 7px;
    	padding: 2px;
    	border-radius: 5px;
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.close-button:hover {
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .floating-notifications.background
    	.notification-row
    	.notification-background
    	.close-button:active {
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .control-center {
    	border-radius: 5px;
    	border: 1px solid ${withHashtag.magenta};
    	margin: 18px;
    	background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5);
    	color: ${withHashtag.base05};
    	padding: 14px;
    }

    .control-center .widget-title {
    	color: ${withHashtag.base05};
    	font-size: 1.3em;
    }

    .control-center .widget-title button {
    	border-radius: 7px;
    	background-color: ${withHashtag.base01};
    	color: ${withHashtag.base05};
    	padding: 8px;
    }

    .control-center .widget-title button:hover {
    	background-color: ${withHashtag.base02};
    	color: ${withHashtag.base05};
    }

    .control-center .widget-title button:active {
    	background-color: ${withHashtag.base03};
    	color: ${withHashtag.base05};
    }

    .control-center .notification-row .notification-background {
    	border-radius: 5px;
    	background-color: ${withHashtag.base01};
    	color: ${withHashtag.base05};
    	margin-top: 14px;
    }

    .control-center .notification-row .notification-background .notification {
    	padding: 7px;
    	border-radius: 7px;
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content {
    	margin: 7px;
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.summary {
    	color: ${withHashtag.base05};
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.time {
    	color: ${withHashtag.base04};
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	.notification-content
    	.body {
    	color: ${withHashtag.base05};
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> * {
    	min-height: 3.4em;
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action {
    	border-radius: 7px;
    	background-color: ${withHashtag.base00};
    	color: ${withHashtag.base05};
    	margin: 7px;
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action:hover {
    	background-color: ${withHashtag.base01};;
    	color: ${withHashtag.base05};
    }

    .control-center
    	.notification-row
    	.notification-background
    	.notification
    	> *:last-child
    	> *
    	.notification-action:active {
    	background-color: ${withHashtag.blue};
    	color: ${withHashtag.base05};
    }

    .control-center .notification-row .notification-background .close-button {
    	margin: 7px;
    	padding: 2px;
    	border-radius: 6.3px;
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .control-center .notification-row .notification-background .close-button:hover {
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .control-center
    	.notification-row
    	.notification-background
    	.close-button:active {
    	background-color: ${withHashtag.red};
    	color: ${withHashtag.base00};
    }

    .control-center .notification-row .notification-background:hover {
    	background-color: ${withHashtag.base00};
    	color: ${withHashtag.base05};
    }

    .control-center .notification-row .notification-background:active {
    	background-color: ${withHashtag.blue};
    	color: ${withHashtag.base05};
    }

    progressbar,
    progress,
    trough {
    	border-radius: 12.6px;
    }

    .notification.critical progress {
    	background-color: ${withHashtag.red};
    }

    .notification.low progress,
    .notification.normal progress {
    	background-color: ${withHashtag.blue};
    }

    trough {
    	background-color: ${withHashtag.base00};
    }

    .control-center trough {
    	background-color: ${withHashtag.base03};
    }

    .control-center-dnd {
    	margin-top: 5px;
    	border-radius: 8px;
    	background: ${withHashtag.base00};
    	border: 1px solid ${withHashtag.base03};
    }

    .control-center-dnd:checked {
    	background: ${withHashtag.base00};
    }

    .control-center-dnd slider {
    	background: ${withHashtag.base03};
    	border-radius: 8px;
    }

    .widget-dnd {
    	margin: 0px;
    	font-size: 1.1rem;
    }

    .widget-dnd > switch {
    	font-size: initial;
    	border-radius: 8px;
    	background: ${withHashtag.base00};
    	border: 1px solid ${withHashtag.base03};
    }

    .widget-dnd > switch:checked {
    	background: ${withHashtag.base00};
    }

    .widget-dnd > switch slider {
    	background: ${withHashtag.base01};
    	border-radius: 8px;
    	border: 1px solid ${withHashtag.magenta};
    }

  '';
}