@keyframes show-notification {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hide-notification {
  from { opacity: 1; }
  to { opacity: 0; display: none; }
}

[data-element="notification"]
  display: flex
  align-items: flex-end
  color: rgba(#000, .5)
  background-color: rgba(#000, .05)
  border-radius: 2rem
  overflow: hidden
  padding: .5rem 1.2rem
  position: fixed
  bottom: 1rem
  right: 1rem
  box-sizing: border-box
  z-index: 10000
  animation: .35s show-notification

  [data-id="badge"]
    display: block
    font-size: 2rem

  [data-id="description"]
    display: none

  [data-id="body"]
    outline: none

  [data-id="actions"]
    display: none
    margin: .5rem 0 .1rem

  &[data-activated="true"] [data-id="actions"]
    display: block

  [data-id="actions"] > a,
  [data-id="actions"] > span
    margin-right: 1rem
    cursor: pointer

    &, &:hover, &:visited, &:active
      color: inherit
      text-decoration: underline dotted

  &:hover,
  &.open
    border-radius: 4px

    [data-id="description"]
      display: block

    [data-id="badge"]
      padding-left: 2rem
  
  &[data-type="warning"]
    background: #ffff87
  
  &[data-type="error"]
    color: #fff
    background: #ff7a68
  
  &[data-type="success"]
    background: #bbffab
    animation: .35s show-notification, .35s hide-notification 5s
    animation-fill-mode: forwards
