@import 'public-booking/main_dependencies';

.alerts {
  position: fixed;
  top: 0;
  right: 0;
  height: auto;
  z-index: 1000;

  width: 100%;

  @include desktop {
    width: 40%;
  }

  .alert {
    margin: 15px;
    padding: 0;
    position: relative;
    animation: slideInDown .2s forwards;

    @include desktop {
      animation: slideInLeft .2s forwards;
    }

    .close {
      right: 10px;
      color: white;
      top: 7px;
      opacity: .5;
    }

    ul {
      padding: 10px;
      list-style: none;
      margin-bottom: 0;
    }

    &.alert-danger {
      @include alert-variant($brand-danger, $brand-danger, white);
      @include base-shadow;
    }
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}