/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/proton_dark_light_notifications.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes web notifications use dark/light theme based on your selected theme, and makes them fit a bit better to rounded proton style. */

@-moz-document url("chrome://global/content/alerts/alert.xhtml") {
  /* line below removes background from the notification "window" on linux */
  #alertNotification{ background: transparent !important }
  
  #alertBox{ border-radius: 6px !important; }
  #alertSettings {
    fill: currentColor !important;
    color: inherit !important;
    border-radius: 0 !important;
    margin-inline: 0 !important;
    margin-bottom: -4px !important;
  }
  #alertSettings, 
  .close-icon{ background: transparent !important }
  
  .close-icon:hover > .toolbarbutton-icon,
  #alertSettings:is(:hover,[open]) > .button-box > .box-inherit{
    background-color: rgba(0,0,0,.09) !important;
  }
  #alertSettings > .button-box > .box-inherit,
  .close-icon > .toolbarbutton-icon{
    padding: 2px !important;
    margin: 2px 2px -2px 0 !important;
    border-radius: 4px !important;
  }
  #alertSettings > .button-box > .box-inherit > .button-icon { padding: 1px }
  #alertSettings > .button-box > .box-inherit{ margin: -4px 4px 3px 0 !important; }
  
  @media (-moz-toolbar-prefers-color-scheme:dark){
    #alertBox {
      border-color: rgba(107,107,107,.3) !important;
      background-color: rgb(43,42,51) !important;
      color: rgba(215,215,215,.9) !important;
    }
    .close-icon:hover > .toolbarbutton-icon,
    #alertSettings:is(:hover,[open]) > .button-box > .box-inherit {
      background-color: rgba(215,215,215,.1) !important;
    }
    #alertSourceLabel {
      color: rgb(5,209,241) !important;
    }
  }
}