$notification--background: rgba($background, 0.95);
$notification--foreground: #8fa2b2;

.notifications {

  &__list {
    background: $notification--background;
    border-radius: 3px;
    bottom: $spacing-unit * 1/5;
    color: $notification--foreground;
    font-size: 0.85rem;
    padding: $spacing-unit * 2/5 $spacing-unit * 3/5;
    position: fixed;
    right: $spacing-unit * 1/5;
    transition: opacity 0.25s;
    width: 250px;
    z-index: 99;

    &-leave {
      opacity: 1;

      &-active {
        opacity: 0;
      }
    }

    &-enter {
      opacity: 0;

      &-active {
        opacity: 1;
      }
    }
  }
}

.notification {
  display: flex;

  &.is-success {

    .icon {
      fill: $green;
    }

    .notification {

      &__count {
        color: $green;
      }
    }
  }

  &.is-error {

    .icon {
      fill: $red;
    }

    .notification {

      &__count {
        color: $red;
      }
    }
  }

  & + .notification {
    margin-top: $spacing-unit * 2/5;
  }

  &__content {
    flex: 1 1 auto;
  }

  &__count {
    font-weight: 800;
  }

  .icon {
    align-self: center;
    display: inline-block;
    fill: currentColor;
    flex: 0 0 auto;
    height: 20px;
    margin-right: $spacing-unit * 1/4;
    width: 20px;
    vertical-align: middle;
  }
}