@keyframes spinner-animation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.notification-button {
  transform: scale(0);
  display: none;
  outline: none;
  border: none;
  width: 1em;
  height: 1em;
  padding: 0;
  margin: 0;
  background-color: transparent;
  position: relative;
  cursor: pointer; }

.notification-button__icon {
  display: none;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -.5em;
  margin-left: -.5em; }
  .notification-button__icon svg {
    display: block;
    width: 100%;
    height: 100%; }

.notification-button__icon--spinner {
  background-color: transparent;
  border: .12em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  width: 0.8em;
  height: 0.8em;
  margin-top: -0.4em;
  margin-left: -0.4em;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 50%;
  animation: spinner-animation 0.65s infinite linear; }

/**
 * States
 */
body.pwp-notification .notification-button {
  transform: scale(1);
  display: block; }

body.pwp-notification .notification-button__icon--off {
  display: block; }

body.pwp-notification.pwp-notification--on .notification-button__icon--off,
body.pwp-notification.pwp-notification--on .notification-button__icon--spinner {
  display: none; }

body.pwp-notification.pwp-notification--on .notification-button__icon--on {
  display: block; }

body.pwp-notification.pwp-notification--loader .notification-button__icon--off,
body.pwp-notification.pwp-notification--loader .notification-button__icon--on {
  display: none; }

body.pwp-notification.pwp-notification--loader .notification-button__icon--spinner {
  display: block; }

/**
 * stylings
 */
.notification-button--fixedfooter {
  position: fixed;
  bottom: 1em;
  left: 1em;
  width: 1.8em;
  height: 1.8em;
  font-size: 25px;
  z-index: 99999;
  border-radius: 50%; }