/**
 * EdGEL Search components
 */

@use "sass:math";

@use "../settings" as *;
@use "../tools" as *;

.card-search-title {
  @include font-size($h3-font-size);
}

// The search result reference line. Same colour as success alert text
.card-search-ref {
  line-height: $line-height-lg;
  color: shift-color($success, $alert-color-scale);
}

// Ensure all other links in the result block are still clickable
.card-search a:not(.stretched-link) {
  position: relative;
  z-index: 2;
}

.card-search {
  flex-direction: row;
  align-items: center;
  margin-bottom: space(3);
  > .card-body > :last-child {
    margin-bottom: 0;
  }
}

.search-result-img-person,
.search-result-img-video {
  position: relative;
  width: percentage(math.div(1, 12));
  min-width: 90px;
  margin: $card-spacer-y 0 $card-spacer-y $card-spacer-x;

  // Fallback display video icon on grey background
  background-color: $gray-200;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35%;

  &::before {
    display: block;
    content: "";
  }

  // Ensure the image is rendered over the calendar icon and padding
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.search-result-img-video {
  background-image: escape-svg($uoe-video-icon-bg);

  &::before {
    padding-top: percentage(math.div(9, 16));
  }
}

.search-result-img-person {
  background-image: escape-svg($uoe-person-icon-bg);

  &::before {
    padding-top: 130%;
  }
}