@import 'ui-variables';

.notifications {
  background-color: @panel-background-color;
  box-shadow: 0 -6px 4px @panel-background-color;
  z-index: 2;
}

.notification {
  background: @background-color-info;
  display: none;
  color: @text-color-inverse;
  margin: 10px;
  margin-top: 0;
  border-radius: @border-radius-large;
}

.notification.error {
  background: @background-color-error;
}

.notification.offline {
  background: linear-gradient(to top, darken(#CC9900, 4%) 0%, #CC9900 100%);
}

.notification.highest-priority {
  display: block;
}

.notif-top {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.notification .icon {
  margin-right: 10px;
}

.notification .title {
  padding: 10px;
}

.notification .subtitle {
  font-size: @font-size-smaller;
  position: relative;
  opacity: 0.8;
}

.notification .subtitle.has-action {
  cursor: pointer;
}

.notification .subtitle.has-action::after {
  content:'';
  background: url(merani://notifications/assets/minichevron@2x.png) top left no-repeat;
  background-size: 4.5px 7px;
  margin-left:3px;
  display: inline-block;
  width:4.5px;
  height:7px;
  vertical-align: baseline;
}

.notification .actions-wrapper {
  display: flex;
}

.notification .action {
  text-align: center;
  flex: 1;
  border-top: solid rgba(255, 255, 255, 0.5) 1px;
  border-left: solid rgba(255, 255, 255, 0.5) 1px;
  padding: 10px;
  cursor: pointer;

  /* The semi-transparent backgrounds that can be layered on top
     of this class shouldn't have sharp corners on the bottom */
  border-bottom-left-radius: @border-radius-large;
  border-bottom-right-radius: @border-radius-large;
}

.notification .action:first-child {
  border-left: none;
}

.notification .action:hover {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: @standard-shadow inset;
}

.notification .action.loading {
  cursor: progress;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: @standard-shadow inset;
}