#notifications {
  background: transparent;
}

.notifications {
  opacity: 1;
  min-width: 24rem;
  .revealer {
    + .revealer {
      >*>box {
        margin-top: 0;
      }
    }
    
    .notification {
      margin-bottom: 25px;
      min-width: 24rem;
      padding: 0px;
      border: 1px solid $fg;
      border-right: none;
      background: $bg;
    }

    .urgency-indicator {
      min-width: 15px;
      margin-bottom: 25px;

      &.normal, &.low {
        background: $hl-alt-2;
        border: 1px solid $hl-alt-2;
      }

      &.urgent {
        background: $hl;
        border: 1px solid $hl
      }
    }

    .body {
      margin-right: 1em;
    }

    .timeout-bar {
      background: $bg-alt-1;

      > trough > progress {
        background-image: none;
        background-color: $hl-alt-1;
      }
    }

    .button {
      font-size: 20px; 
      margin-left: 5px;
      margin-right: 5px;
      
      &:hover {
        color: $hl;
      }
    }

    .icon {
      min-width: 68px;
      min-height: 68px;
      margin: 5px;
    }

    .icon image {
      font-size: 58px;
      margin: 5px;
      color: $fg;
    }

    .icon box {
      min-width: 68px;
      min-height: 68px;
    }

    .title {
      font-size: 28px;
      padding-right: 5px;
    }

    .actions .action-button {
      margin: 0 .4em;
      margin-top: .8em;
      border: 2px solid $fg;
    }

    .actions .action-button:first-child {
      margin-left: .5em;
    }

    .actions .action-button:last-child {
      margin-right: .5em;
    }
  }
}