window.notifications {
  .notification {
    border-radius: 15px;
    background-color: $base;
    margin: 25px 25px 20px 0px;
    font-family: "Iosevka";
    padding: 5px;
    // border: 2px solid $rosewater;
    box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px;

    &.critical {
      box-shadow: inset 0 0 .5em 0 $red;
    }

    &:hover button.close-button {
      // @include button-hover;
      background-color: transparentize($red, .5);
    }

    .content {
      .title {
        margin-top: 5px;
        margin-right: 10px;
        color: $text;
        font-size: 1.2em;
      }

      .time {
        color: transparentize($text, .2);
        margin: 5px 10px;
      }

      .description {
        font-size: .9em;
        color: transparentize($text, .2);
      }

      .icon {
        border-radius: 10px;
        margin-right: 10px;

        &.img {
          border: 2px solid $green;
        }
      }
    }

    box.actions {
      // @include spacing(0.5);
      margin-top: 10px;

      button {
        // @include button;
        background-color: $surface0;
        border: 2px solid $surface0;
        border-radius: 10px;
        font-size: 1.2em;
        margin: 0px 10px 10px 0px;
        padding: 10px;

        &:first-child {
          margin: 0px 10px 10px 10px;
        }

        &:hover {
          background-color: $surface2;
          border: 2px solid $rosewater;
        }
      }
    }

    button.close-button {
      // @include button($flat: true);
      margin: 0px 0px 0px 0px;
      border-radius: 10px;
      min-width: 30px;
      min-height: 30px;
      background-color: rgba(0, 0, 0, 0); //$crust;
      padding: 0px;

      &:hover {
        background-color: transparentize($red, .5);
      }

      &:active {
        background-image: none;
        background-color: $red;
      }
    }


    .description {
      min-width: 350px;
    }
  }
}