home-manager/programs/desktop/swaync/default.nix

{
  config,
  pkgs,
  fonts,
  accentColour ? "base07",
  ...
}: {
  home.packages = [pkgs.swaynotificationcenter];
  xdg.configFile."swaync/style.css".text = with config.scheme.withHashtag; let
    alpha = "0.8";
    alpha-background = "rgba(${config.scheme.base00-rgb-r}, ${config.scheme.base00-rgb-g}, ${config.scheme.base00-rgb-b}, ${alpha})";
  in ''
    * {
      all: unset;
      font-size: 1.2rem;
      font-family: "${fonts.monospace.name}";
      transition: 200ms;
      box-shadow: none;
    }

    .floating-notifications.background .notification-row .notification-background {
      border-radius: 10px;
      border: 1px solid ${config.scheme.withHashtag.${accentColour}};
      margin: 18px;
      background-color: ${alpha-background};
      color: ${base05};
      padding: 0;
    }

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

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

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

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

    .floating-notifications.background
      .notification-row
      .notification-background
      .notification
      .notification-content
      .body {
      color: ${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: 10px;
      background-color: ${base01};
      color: ${base05};
      margin: 7px;
    }

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

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

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

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

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

    .control-center {
      border-radius: 10px;
      border: 1px solid ${config.scheme.withHashtag.${accentColour}};
      margin: 18px;
      background-color: ${alpha-background};
      color: ${base05};
      padding: 14px;
    }

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

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

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

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

    .control-center .notification-row .notification-background {
      border-radius: 10px;
      background-color: ${base01};
      color: ${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: ${base05};
    }

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

    .control-center
      .notification-row
      .notification-background
      .notification
      .notification-content
      .body {
      color: ${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: ${base00};
      color: ${base05};
      margin: 7px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  '';
}