@import '../../variables';
@import '../../mixins';

.#{$prefix}-ui-recommendation-overlay {
  @extend %ui-container;

  @include layout-cover;
  @include hidden-animated($animation-duration * 2);

  background-color: $color-background-dimmed;

  .#{$prefix}-container-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
  }

  .#{$prefix}-replay-section {
    .#{$prefix}-container-wrapper {
      align-items: center;
    }
  }

  &:not(.#{$prefix}-recommendations) {
    .#{$prefix}-recommendations-section {
      display: none;
    }
  }

  .#{$prefix}-recommendations-section {
    max-width: 100%;
    width: 100%;

    .#{$prefix}-container-wrapper {
      align-items: center;
      overflow-x: auto;
      display: flex;
      justify-content: space-evenly;
      flex-direction: row;
      column-gap: 5%;
      padding: 1em 5%;
    }

    .#{$prefix}-ui-recommendation-item {
      @include focusable;

      position: relative;
      $padding: 0.5em;
      cursor: pointer;
      color: $color-primary;
      background-color: $color-background-menu;
      background-position: center;
      background-size: cover;
      border: solid $color-primary 2px;
      border-radius: 0.5rem;
      box-shadow: 0 0 5px 0 transparentize($color: $color-black, $amount: 0.75);
      // sass lint mentions 'aspect-ratio' as a misspelled property, but it's valid CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
      // Therefore we're temporarily disabling that rule for one line.
      // sass-lint:disable no-misspelled-properties
      aspect-ratio: 16 / 9;
      width: 30%;
      min-width: 10em;
      text-align: left;
      overflow: hidden;
      flex-shrink: 0;
      transform: scale(1);
      transition: transform $animation-duration-short ease-in;
      // sass-lint:disable no-vendor-prefixes
      -webkit-tap-highlight-color: transparent;

      .#{$prefix}-title-container {
        @include layout-align-top;
        @include background-gradient(to top);

        left: 0;
        height: 50%;
        min-height: fit-content;
        padding: $padding;

        .#{$prefix}-title {
          display: inline-block;
          top: $padding;
          left: $padding;
          right: $padding;
          white-space: normal;
          max-height: $font-size * 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .#{$prefix}-duration {
        position: absolute;
        bottom: $padding;
        right: $padding;
        background-color: $color-background-text;
        box-sizing: border-box;
        padding: 0.3em 0.5em;
        border-radius: $border-radius;
      }

      &:hover,
      &:focus {
        transform: scale(1.05);
      }
    }
  }
}