/*
 * Copyright (c) 2024 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
*/

// The feed list component is used to list events, news and announcements.
// Variants include: horizontal, bordered, gapped
.feed-list {
  display: flex;
  flex-direction: column;

  .feed-item {
    max-height: 35.4rem;
  }
  
  @media (min-width: @screen-sm-min) {
    &-horizontal {
      flex-direction: row;

      // In the horizontal variant, put items in a row.
      .feed-list-items {
        flex-direction: row;
      }
    }
  }

  &-bordered:not(.feed-list-gapped) {
    border: 1px solid #ccc;

    // Add border bottoms to feed items. The last child does not need a
    // border-bottom since we will use the parent's border.
    &.feed-list-vertical .feed-item {
      border-bottom: 1px solid #ccc; 

      &:last-child {
        border-bottom: unset;
      }
    }
    
    // However, if it is the horizontal variant, do not set border bottoms.
    &.feed-list-horizontal .feed-item {
      border-right: 1px solid #ccc;

      &:last-child {
        border-right: unset;
      }
    }
  }

  &-gapped {
    gap: 2rem;

    .feed-list-items {
      gap: 2rem;
      height: 100%;
    }

    .feed-item {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  &-bordered.feed-list-gapped {
    border: unset;

    .feed-item {
      border: 1px solid #ccc;
    }
  }

  &-shadowed.feed-list-gapped .feed-item {
    // Add shadow to individual feed items when feed list is gapped.
    box-shadow: 0 0 12px #00000022;
  }

  &-items {
    display: flex;
    flex-direction: column;
  }
}


// The feed actions component can be used with feed list.
.feed-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;

  &-btns {
    display: flex;

    & > .btn {
      width: 100%;
      margin: 0;
    }
  }
  
  @media (min-width: @screen-sm-min) {
    .feed-list-horizontal & {
      max-width: 32rem;
    }
  }
}

.feed-actions-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5/3;
  object-fit: cover;
}

// Specific rules to make news compatible with feed list.
// Target the direct child of .news-items widget. This is always the container
// of news items. We want to make this the height of the flexbox so cards align
// with actions.
.feed-list .news-items > * {
  height: 100%; 
}
