$block = ".notification";
$transition-delay = .5s;

{$block} {
  display: flex;
  align-items: center;
  background: $c-danger-base;
  color: $c-white-base;
  transition: all $transition-delay linear;

  &--overlay {
    position: absolute;
    right: 0;
    bottom: -50px;
    left: 0;
    min-height: 50px;

    &{$block}--showing {
      bottom: 0;
    }
  }

  &--non-overlay {
    height: 0;

    {$block}__inner {
      height: 0;
      transition: all $transition-delay linear;
      transform: translateY(25px);
    }

    &{$block}--showing {
      height: 50px;

      {$block}__inner {
        display: flex;
        transform: translateY(0);
      }
    }
  }

  &__inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px;

    & button {
      margin-right: 5px;

      &:last-child {
        margin-right: 0;
      }
    }

    & {$block}__countdown-value {
      margin-left: 10px;
    }
  }

  &__body {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    margin-right: 5px;

    & strong {
      margin-right: 5px;
    }
  }

  &--info {
    background: $c-gray-darkest;
  }

  &--success {
    background: $c-success-base;
  }

  &--hidden {
    bottom: -50px;
  }
}