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

// main list
.message-list {
  width: 30em;
  padding: 0;
  color: $secondary_fg_color;
  text-shadow: none;
  box-shadow: none;
  border: 0 solid $border_color;

  // padding and margins to account for scrollbar
  &:ltr {
    margin-left: $container_padding;
    margin-right: 0;
    padding-right: $container_padding * 2;
    border-right-width: 1px;
  }

  &:rtl {
    margin-right: $container_padding;
    margin-left: 0;
    padding-left: $container_padding * 2;
    border-left-width: 1px;
  }

  .message-list-placeholder {
    @extend %title_2;
    spacing: $container_padding * 2;
    color: $inverse_secondary_fg_color;

    // icon size and color
    > StIcon {
      icon-size: 48px; // 48px
      margin-bottom: $container_margin * 3;
      -st-icon-style: symbolic;
    }
  }
}

.message-list-sections {
  spacing: $container_padding;
  margin: 0; // to account for scrollbar
  padding-bottom: $container_padding;

  // to account for scrollbar
  &:ltr { margin-right: 0; }
  &:rtl { margin-left: 0; }
}

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

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

// message bubbles
.message {
  background-color: $popover_button_bg;
  border-radius: $buttons_radius;
  color: $secondary_fg_color;
  text-shadow: none;
  box-shadow: 0 3px 8px -2px rgba(black, 0.15);

  @if $outline == 'false' {
    border: none;
  } @else {
    border: 1px solid $popover_button_border;
  }

  .popup-menu & {
    box-shadow: none;
    margin: 0 0 $container_margin;
  }

  &:hover, &:focus {
    background-color: $popover_button_hover;
    border-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.08));
  }

  &:active { background-color: $popover_button_active; }

  // icon container
  .message-icon-bin {
    padding: $container_padding * 3;
    padding-right: $container_padding;

    &:rtl { padding-left: $container_padding; }

    // icon size and color
    > StIcon {
      icon-size: $medium_size + $container_padding * 2;
      -st-icon-style: symbolic;
    }

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

  // content
  .message-content {
    padding: $container_padding + $container_margin * 2;
    spacing: $container_margin;
    margin-bottom: $container_margin * 2;
    color: $secondary_fg_color;
  }

  // title
  .message-title {
    font-weight: bold;
    padding-top: 0.57em;
  }

  // secondary container in title box
  .message-secondary-bin {
    padding: 0 $container_margin * 2;

    // notification time stamp
    > .event-time {
      color: $secondary_fg_color;
      font-size: 0.9em;
      padding-bottom: 0.13em;

      &:ltr { text-align: right };
      &:rtl { text-align: left };
    }
  }

  // close button
  .message-close-button {
    color: $secondary_fg_color;
    padding: $container_margin / 2;
    height: 24px;
    width: 24px;
    border-radius: $circular_radius;

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

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

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

/* Media Controls */
.message-media-control {
  margin: $container_padding * 2 + 12px $container_padding;
  padding: $container_padding * 2;
  border-radius: $circular_radius;
  color: $secondary_fg_color;

  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
  &:active { color: $fg_color; background-color: $track_color; }
  &:insensitive { color: $disabled_secondary_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: 48px !important; // 48px
  border-radius: $buttons_radius;
  border: none;

  // when there is no artwork
  &.fallback {
    color: $hint_fg_color;
    background-color: $divider_color;
    border: none;
    border-radius: $buttons_radius;
    icon-size: 32px !important;
    padding: 8px;
  }
}
