nixos/home/desktop/sway/swaync/default.nix

{
  config,
  pkgs,
  fonts,
  accentColourName,
  ...
}:
{
  home.packages = [ pkgs.swaynotificationcenter ];
  xdg.configFile."swaync/style.css".text =
    let
      sc = config.scheme.withHashtag;
      alpha = "0.85";
      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: 5px;
        border: 1px solid ${sc.${accentColourName}};
        margin: 18px;
        background-color: ${alpha-background};
        color: ${sc.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: ${sc.base05};
      }

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

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

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

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

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

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

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

      .control-center {
        border-radius: 5px;
        border: 1px solid ${sc.${accentColourName}};
        margin: 18px;
        background-color: ${alpha-background};
        color: ${sc.base05};
        padding: 14px;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    '';
}