/* ACTIVITY FEED */
%base {
  %activityFeed {
    background-color: transparent;
  }
}
%activityFeed {
  %activityFeedLayout,
  >%flex:last-child {
    background-color: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.5));
  }
  %activityFeedLayout {
    margin-left: -1px;
    padding-left: 17px;
  }
  %activityFeedH5 {
    color: hsla(0, 0%, 100%, 0.7);
  }
  %activityFeedColoredText,
  %activityFeedNoticeBody {
    color: hsla(0, 0%, 100%, 0.7);
  }
  %activityFeedCardTitle,
  %activityFeedNoticeHeader {
    color: #fff;
  }
  %activityFeedColorStandard {
    color: hsla(0, 0%, 100%, 0.7);
  }
  %activityFeedColorMuted {
    color: hsla(0, 0%, 100%, 0.3);
  }

  // CARD
  %activityFeedCard {
    border-radius: 5px;
    backface-visibility: hidden;
  }
  %activityFeedOuter {
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease-in-out;
    &%activityFeedOuterInteractive {
      &:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  %activityFeedColoredBackground {
    background: $main-color;
  }
  %activityFeedCardFooter {
    box-shadow: inset 0 1px hsla(0, 0%, 100%, 0.04);
  }
  %activityFeedCardIconWrapperInteractive {
    transition: all 0.15s ease-in-out;
    &:hover {
      background-color: hsla(0, 0%, 100%, 0.04);
    }
  }
  %activityFeedShareButton {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    color: #fff;
    transition: all 0.15s ease-in-out;
    &:hover {
      background: $main-color;
    }
  }

  // GRID
  %activityFeedQuickLauncherWrapped,
  %activityFeedQuickLauncherUnwrapped {
    background-color: hsla(0, 0%, 100%, 0.07);
    border-radius: 4px;
    &%activityFeedQuickLauncherClickable {
      transition: all 0.15s ease-in-out;
      &:hover {
        background-color: $main-color;
      }
    }
  }
  %activityFeedQuickLauncherEmpty {
    background-color: hsla(0, 0%, 100%, 0.01);
    border-radius: 4px;
  }

  // NOW PLAYING & RECENTLY PLAYED CONTAINERS
  %activityFeedNowPlayingContainer,
  %activityFeedRecentlyPlayedContainer {
    background-color: rgba(0, 0, 0, 0.3);
  }
  %activityFeedContainerHeaderIcon {
    &[src='/assets/b09888a1a6c74c8bb9af76ee61eb70e7.svg'] {
      opacity: 0.7;
      filter: contrast(5);
      mix-blend-mode: screen;
    }
  }
  %activityFeedPopoutContainer {
    transition: all 0.15s ease-in-out;
    &:hover {
      background-color: hsla(0, 0%, 100%, 0.07);
    }
  }
  %activityFeedPopoutContainerBody {
    background-color: hsla(0, 0%, 100%, 0.04);
    border-radius: 5px;
  }
  %activityFeedPopoutContainerSection {
    background-color: transparent;
    border-radius: 5px;
  }
  %activityFeedSeparator {
    background-color: hsla(0, 0%, 100%, 0.04);
  }
  %activityFeedPopoutContainerAvatarMask {
    -webkit-mask: none;
    mask: none;
  }

  // POPOUT
  %activityFeedPopout {
    background-color: rgba(0, 0, 0, 0.8);
    %activityFeedColorStandard {
      color: inherit;
    }
  }
  %activityFeedPopoutEnabled,
  %activityFeedPopoutMemberListItem {
    color: hsla(0, 0%, 100%, 0.7);
    transition: all 0.15s ease-in-out;
    &:hover {
      background-color: $main-color;
      color: #fff;
    }
  }
  %activityFeedPopoutAvatarMask {
    -webkit-mask: none;
    mask: none;
  }

  // NOTICE
  %activityFeedNoticeWrapper {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
  }
  %activityFeedGdprWrapper {
    background-color: hsla(0, 0%, 100%, 0.07);
  }
  %activityFeedNoticeClose {
    color: #fff;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    &:hover {
      opacity: 1;
    }
  }

  // PLACEHOLDER
  %activityFeedPlaceholderWrapper {
    background-color: rgba(0, 0, 0, 0.1);
  }
}