/* Message List */
// a.k.a. notifications in the menu

.message-list {
  width: 31.5em;
  padding: 0 12px;
  text-shadow: none;

  .message-list-placeholder { spacing: 12px; }
}

.message-list-sections {
  margin: 0 $base_margin * 4; // to account for scrollbar
}

.message-list-section,
.message-list-sections,
.message-list-section-list {
  spacing: $base_spacing;
}

// do-not-disturb + clear button
.message-list-controls {
  margin: ($base_margin * 2) ($base_margin * 4) 0;
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: $base_margin;
  spacing: $base_spacing * 2;
}

// .message-list-clear-button.button {
//   margin: 8px 8px;
// }

// message bubbles
.message {
  margin: 0 4px 6px;

  .popup-menu & {
    @extend %popover_bubble;
  }

  // icon container
  .message-icon-bin {
    margin: 8px 0;
    padding: 8px 0px 8px 8px;
    &:rtl { padding: 8px 8px 8px 0px; }

    // icon size and color
    > StIcon {
      icon-size: 32px; // 32px
      -st-icon-style: symbolic;
    }

    // fallback
    > .fallback-app-icon {
      width: 16px;
      height: 16px;
    }
  }

  .message-secondary-bin {
    padding: 0 8px;

    > .event-time {
      min-height: $small_size - 2px;
      color: $hint_fg_color;
      font-size: 1em;
      text-align: right;
      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
      padding-bottom: 0.13em;
    }
  }

  .message-title {
    min-height: $small_size - 2px;
    padding-top: 2px;
    color: $fg_color;
    font-weight: bold;
    font-size: 1em;
  }

  .message-content {
    min-height: $menuitem_size * 2 - 8px * 2;
    padding: 8px;
    color: $hint_fg_color;
    font-size: 1em;
  }

  // close button
  .message-close-button {
    color: $alt_fg_color;
    padding: 0;
    height: 24px;
    width: 24px;
    border-radius: $circular_radius;

    &:hover, &:active { color: $fg_color; }
    &:hover, &:focus { background-color: $divider_color; }
    &:active { background-color: $track_color; }
  }

  // body
  .message-body {
    color: $hint_fg_color;
  }
}

// URLs in messages
.url-highlighter {
  link-color: $link_color;
}

.message-media-control {
  margin: 16px 4px;
  padding: 8px;
  border-radius: $circular_radius;
  color: $alt_fg_color;
  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
  &:active { color: $fg_color; background-color: $track_color; }
  &:insensitive { color: $disabled_fg_color; }

  &:last-child:ltr { margin-right: 16px; padding-right: 8px; }
  &:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}

// album-art
.media-message-cover-icon {
  icon-size: 32px !important;
  margin: 0 0 0 4px !important;
  &:rtl { margin: 0 4px 0 0 !important; }
  &.fallback {
    icon-size: 16px !important;
    padding: 8px;
    border: none;
    border-radius: $bt_radius;
    background-color: $divider_color;
    color: $hint_fg_color;
  }
}