frontend/scss/atoms/_notif.scss
/***

Notification
============

Self destructing notification showing at the bottom of the page

```
<div class="styleguide--demo">
    <div class="notif notif--success"><div class="notif__inner">Login complete</div></div>
</div>
```

***/

.notif {
  position:fixed;
  bottom:0;
  min-height:60px;
  width:100%;
  left:0;
  right:0;
  z-index:$zindex__notif;
  background:$color__notif--default;
}

.notif__inner {
  min-height:60px;
  text-align:center;
  position:relative;

  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      padding: 20px #{map-get($outer-gutters, $name)};
    }
  }

  @include breakpoint(xsmall) {
    text-align:left;
  }
}

.notif__close {
  @include btn-reset;
  position:absolute;
  right:(60px - 46px) * 0.5;
  top:(60px - 46px) * 0.5;
  background:transparent;
  height:16px + 30px;
  width:16px + 30px;
  color:$color__text;
  opacity:0.5;
  padding:15px;

  &:hover {
    color:$color__text;
    opacity:0.25;
  }
}

@keyframes godown {
  0% {
    transform: translateY(0);
    opacity:1;
  }
  90% {
    opacity:1;
  }
  100% {
    transform: translateY(100%);
    opacity:0;
  }
}

.notif--destroy {
  animation: godown 0.3s 3s normal forwards;
}

.notif--success {
  background:$color__notif--success;
}

.notif--error, .notif--warning {
  color:$color__background;
  background:$color__notif--error;
}
