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

// main list
.message-list {
  width: 29em;
  border: solid $borders_color;

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

  .message-list-placeholder { 
    @extend %title_2;
    color: transparentize($insensitive_fg_color, .5);

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

.message-list-sections {
  spacing: $base_padding;
  margin: 0; 
  padding-bottom: $base_padding;

  // to account for scrollbar
  &:ltr {margin-right: $base_margin * 3; }
  &:rtl {margin-left: $base_margin * 3;}
}

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

// do-not-disturb + clear button
.message-list-controls {
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: $base_padding;
  spacing: $base_padding;
  @extend %heading;

  .dnd-button {
    // We need this because the focus outline isn't inset like for the buttons
    // so the dnd button would grow when it gets focus if we didn't change only
    // its color when focusing.
    border-width: 2px;
    border-color: transparent;
    border-radius: 32px;
    border-style: solid;

    &:focus {
      border-color: transparentize($selected_bg_color, 0.4);
    }
  }
}

// message bubbles
.message {
  @include card;

  // icon container
  .message-icon-bin {
    padding: ($base_padding * 3);

    &:ltr {padding-right:$base_padding;}
    &:rtl {padding-left:$base_padding;}

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

    // fallback
    > .fallback-app-icon {
      width: $base_icon_size;
      height: $base_icon_size;
    }
  }

  // content
  .message-content {
    spacing: 4px;
    padding: ($base_padding*1.5);
    margin-bottom: $base_margin*2;
  }

  // title
  .message-title {
    font-weight: bold;
    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
    padding-top: 0.57em;
  }

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

    // notification time stamp
    > .event-time {
      color: transparentize($fg_color, 0.5);
      @include fontsize($base_font_size - 2);
      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
      padding-bottom: 0.13em;

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

  // close button
  .message-close-button {
    color: $fg_color;
    background-color: transparentize($fg_color, 0.9);
    border-radius: 99px;
    padding: $base_padding - 1px;
    margin: 1px;
    &:hover {background-color: transparentize($fg_color, 0.8);}
    &:active {background-color: transparentize($fg_color, 0.9);}
  }

  // body
  .message-body {color: darken($fg_color, 10%);}
}

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

/* Media Controls */
.message-media-control {
  padding: 0 $base_padding*3;
  margin: $base_padding*2 0;
  border-radius: $base_border_radius;
  color: $fg_color;

  // colors are lightened since the media controls are in a card
  &:hover {
    background-color: lighten($hover_bg_color, 5%);
    color: $fg_color;
  }

  &:active { 
    background-color: lighten($active_bg_color, 5%);
    color: $fg_color;
  }

  &:insensitive { color: lighten($insensitive_fg_color, 5%); }
  
  // fix margin for last button
  &:last-child:ltr { margin-right: $base_margin*3; }
  &:last-child:rtl { margin-left: $base_margin*3; }
}

// album-art
.media-message-cover-icon {
  icon-size: $base_icon_size*3 !important; // 48px
  border-radius: $base_border_radius;

  // when there is no artwork
  &.fallback {
    color: darken($fg_color, 17%);
    background-color: $bg_color;
    border: 1px solid transparent;
    border-radius: $base_border_radius;
    icon-size: $large_icon_size !important; // 32px
    padding: ($base_padding*2 + 2); // 16px
  }
}