@import "../assets/styles/bootstrap/variables";

.scaffold-notified {

  display: flex;
  flex-grow:1;

}

.scaffold-notified .notifications-br {

  bottom: 70px !important;
  min-width: 320px !important;
  width: auto !important;
  padding:0px !important;

}

.scaffold-notified .notification {

  opacity: .85 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding:0px !important;
}

.scaffold-notified .notification-visible:hover {
  opacity: 1 !important;
}

.scaffold-notified .notification-dismiss {
  display: none;
}


.scaffold-notified .notification-template {
  display: flex;
  background: var(--theme-background);
  height: 70px;

  padding-right:30px;

  border-left: solid;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.scaffold-notified .notification-payload {

  flex-grow: 1;

  color:white;
  font-size: larger;

  display: flex;
  align-items: center;

}

.scaffold-notified .notification-icon {

  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--theme-warning);

  width:70px;
  font-size: 40px;

}

.scaffold{
  .notifications-bl{
    left: $sidebar-wrapper !important;
  }
  &.collapsed{
    .notifications-bl{
      left: $sidebar !important;
    }
  }
}

.notification{
  border-top-color: transparent !important;
  box-shadow: none !important;
  color: white !important;
  border-top: none !important;
  border-radius: 4px !important; 

  .notification-title{
    color: white !important;
  }

  &.notification-info{
    background-color: $brand-info !important;
  }
  &.notification-error{
    background-color: $brand-danger !important;
  }
  &.notification-warning{
    background-color: $brand-warning !important;
  }
  &.notification-success{
    background-color: $brand-success !important;
  }

  .notification-dismiss{
    background-color: transparent !important;
    color: white;
  }

}