/* Notifications & Message Tray */

$notification_banner_height: 64px;
$notification_banner_width: 34em;

// Banner notifications
.notification-banner {
  min-height: $notification_banner_height;
  width: $notification_banner_width;
  font-size: 1em;
  margin: $space-size;
  border-radius: $popup-radius;
  border-left: none;
  border-bottom: none;
}

.notification-buttons-bin {
  background-color: transparent;
  padding: 0;
  spacing: 0;
  margin: 0;
}

.notification-button {
  min-height: 40px;
  padding: $space-size / 2 16px;
  background-color: transparent;
  color: $text-secondary;
  font-weight: 500;
  border: none;
  border-top: 1px solid $border;

  .popup-menu & {
    padding: 0 16px;
  }

  &:first-child:ltr {
    border-radius: 0 0 0 $popup-radius;
  }

  &:last-child:ltr {
    border-radius: 0 0 $popup-radius;
    margin-right: 0 !important;
  }

  &:first-child:rtl {
    border-radius: 0 0 $popup-radius;
  }

  &:last-child:rtl {
    border-radius: 0 0 0 $popup-radius;
    margin-left: 0 !important;
  }

  &:first-child:last-child {
    border-radius: 0 0 $popup-radius $popup-radius;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  &:focus {
    background-color: transparent;
    color: $text-secondary;
    box-shadow: inset 0 0 0 2px $secondary-fill;
  }

  &:hover {
    background-color: $secondary-fill;
    color: $text;
    box-shadow: none;
  }

  &:active, &:checked { background-color: $track; color: $text; }

  &:insensitive {
    background-color: transparent;
    color: $text-secondary-disabled;
  }

  .popup-menu & {
    &:first-child:ltr {
      border-radius: 0 0 0 $material-radius;
    }
  
    &:last-child:ltr {
      border-radius: 0 0 $material-radius;
    }
  
    &:first-child:rtl {
      border-radius: 0 0 $material-radius;
    }
  
    &:last-child:rtl {
      border-radius: 0 0 0 $material-radius;
    }
  
    &:first-child:last-child {
      border-radius: 0 0 $material-radius $material-radius;
    }
  }
}
