@import "../css/colors"
@import "../css/vars"

:local(.notification)
  display: flex
  color: $textGray
  background-color: $backgroundGray
  font-family: $sansserif
  font-size: 16px

  .notification-margin
    width: $defaultLeftMargin
    text-align: center
    padding: 20px 10px 15px

    [class^="doka-icon-"], [class*="doka-icon-"]
      color: $white

  .notification-body
    margin: 22px 20px 20px 0
    flex: 1

  .notification-dismiss-button
    margin: $defaultPadding
    align-self: center;


:local(.notification.info)
  background-color: $backgroundGray
  // border: solid 1px $red
  color: $textGray

  .notification-margin
    [class^="doka-icon-"], [class*="doka-icon-"]
      color: $textGray

:local(.notification.acknowledgement)
  background-color: $green
  color: $white

:local(.notification.warning)
  background-color: $yellow
  color: $white

:local(.notification.error)
  background-color: $red
  color: $white

:local(.notification.animated)
  opacity: 0;
  max-height: 0;

:local(.notification.visible)
  opacity: 1;
  max-height: 1000px;
  transition: opacity .8s, max-height .8s

:local(.notification.hidden)
  opacity: 0;
  max-height: 0;
  transition: opacity .8s, max-height .8s