nixos/home/swaync/default.nix

{
  config,
  pkgs,
  accentColour,
  ...
}: {
  home.packages = [pkgs.swaynotificationcenter];
  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: 10px;
      border: 1px solid ${withHashtag.${accentColour}};
      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: 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: ${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: 10px;
      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: 10px;
      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: 10px;
      border: 1px solid ${withHashtag.${accentColour}};
      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: 10px;
      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.${accentColour}};
    }

  '';
}