@type: 'extra';
@element: 'custom';

@import (multiple, reference, optional) '../../theme.config';

// Organisation Cards Listing
.organisationCards {
  .ui.cards {
    .card.u-card {
      border: 1px solid #ccc;
      margin: 0.75em;

      &:hover .card-title {
        text-decoration: underline;
      }

      .image {
        width: 100%;
      }

      .img-container {
        min-height: 120px;
        text-align: center;

        img {
          width: auto;
          max-height: 100px;
        }
      }
    }
  }
}

// Indicators Cards Listing
div.indicatorCards {
  a {
    color: @linkColor !important;
  }

  h4 {
    font-weight: 400;
  }

  span.year {
    margin-right: 1em;
  }

  .simple-listing-item {
    margin-bottom: 1em !important;
  }
}

// Event Cards Listing
.eventCards {
  .u-item.listing-item.simple-listing-item {
    border-bottom: 1px solid #ddd;
  }

  .u-item.listing-item a {
    color: @linkColor !important;
  }

  .start-date {
    .day {
      position: relative;
      color: @ccaOrangeColor;
      font-size: 2.5em;
      font-weight: 900;

      &:after {
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 80px;
        height: 3px;
        background-color: @ccaOrangeColor;
        content: '';
      }
    }

    .date {
      font-size: 1.5em;
      font-weight: 600;
    }
  }

  .bottom-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;

    .email-info {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .subjects {
      .label {
        padding: 5px 7px;
        margin-right: 0.5em;
        background: #eee;
        color: #3d5265;
      }
    }
  }

  .u-item.listing-item {
    .ui.image.eea-logo {
      width: 100px;
      max-width: none;
      height: 45px;
      object-fit: initial;
      object-position: unset;
    }

    .event-organisation {
      display: flex;
      align-items: center;
      margin: 1em 0;
      gap: 0.5em;
    }
  }
}

.dropdown.listing {
  .ui.selection.dropdown:not(.multiple) {
    display: inline-flex;
    width: auto;
    min-width: 180px;
    align-items: center;
    justify-content: space-between;

    > .dropdown.icon {
      position: relative;
      top: 0;
      right: -15px;
      padding: 0;
      font-size: 1rem;
    }
  }
}

.event-accordion-view {
  .listing-header {
    font-weight: bold;
  }

  .bottom-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2em;
    gap: 1em;

    p {
      margin: 0;
    }
  }
}

.no-image-placeholder {
  height: 120px;
  background-color: #f0f0f0;
}