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

.alerts {
  &__list {
    background: $alert--background;
    border-radius: 3px;
    bottom: $spacing-unit * 1/5;
    color: $alert--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;

    -webkit-user-select: none;
    -webkit-touch-callout: none;

    &-exit {
      opacity: 1;

      &-active {
        opacity: 0;
      }
    }

    &-enter {
      opacity: 0;

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

.alert {
  display: flex;

  &.is-success {
    .icon {
      fill: $green;
    }

    .alert {
      &__count {
        color: $green;
      }
    }
  }

  &.is-error {
    .icon {
      fill: $red;
    }

    .alert {
      &__count {
        color: $red;
      }
    }
  }

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

  &__content {
    flex: 1 1 auto;
  }

  &__count {
    font-weight: 700;
  }

  .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;
  }
}
