{
  config,
  fonts,
  ...
}: {
  programs.wlogout = {
    enable = true;
    layout = [
      {
        label = "reboot";
        action = "systemctl reboot";
        text = "Reboot";
        keybind = "r";
      }
      {
        label = "shutdown";
        action = "systemctl poweroff";
        text = "Shutdown";
        keybind = "s";
      }
      {
        label = "logout";
        action = "swaymsg exit";
        text = "Logout";
        keybind = "l";
      }
    ];
    style = let
      sc = config.scheme.withHashtag;
      shutdownIcon = ./icons/shutdown.png;
      rebootIcon = ./icons/reboot.png;
      logoutIcon = ./icons/logout.png;
    in ''
      * {
        font-size: ${toString fonts.sizes.popups}px;
        font-family: "${fonts.sansSerif.name}";
      }

      window {
        border: none;
        background-color: transparent;
      }

      button {
        background-color: ${sc.base00};
        background-repeat: no-repeat;
        background-position: center;
        background-size: 25%;
        box-shadow: none;
        margin: 5px;
        color: ${sc.base05};
      }

      button:hover {
        background-color: ${sc.base01};
        color: ${sc.base05};
      }

      button:focus {
        background-color: ${sc.base02};
        color: ${sc.base05};
      }

      #shutdown {
        background-image: url("${shutdownIcon}");
      }

      #reboot {
        background-image: url("${rebootIcon}");
      }

      #logout {
        background-image: url("${logoutIcon}");
      }
    '';
  };
}