// COMPONENT: Notification: Used to notify the user when state has changed in a
// significant way
.notification
  display: flex
  margin-bottom: $gutter

  &.notification-title, .notification-title, .notification-dismiss
    padding: $gutter

  .notification-title
    flex: 1

  .notification-dismiss
    appearance: none
    background-color: $text
    border-left: 1px solid $text
    color: inherit
    cursor: pointer
    display: block
    text-decoration: none

    &:hover
      color: $background

  @each $name, $color in $status
    &.notification--#{$name}
      background-color: $color
      color: $text-light

      .notification-dismiss
        background-color: darken($color, 5%)
        border-color: darken($color, 10%)

// COMPONENT: Notifications container: Contains notifications in an Android
// "toast" style way
#notifications
  bottom: $gutter
  left: 50%
  position: fixed
  transform: translateX(-50%)
  z-index: $z-index-modal + 1

  +small-screen
    left: $gutter
    right: $gutter
    transform: none


  .notification
    animation: notification-in 150ms $swift-in both
    border-radius: $border-radius
    box-shadow: $shadow-level-2

    @for $i from 1 through 10
      &:nth-child(#{$i})
        animation-delay: 150ms + $i * 50ms

.error_notification
  @extend .notification, .notification--error

@keyframes notification-in
  0%
    opacity: 0
    transform: translateY($gutter)

  100%
    opacity: 1
    transform: translateY(0)
