@use '@angular/material' as mat;

.game-cover-container {

  height: 352px;
  width: 264px;
  background-repeat: no-repeat;
  background-position: center bottom;
  @include mat.elevation(4);
}

.enlarge {
  transition: transform 280ms ease-out;

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

.shine {
  position: relative;
  overflow: hidden;

  &::before {
    background: linear-gradient(
        to right,
        fade_out(#fff, 1) 0%,
        fade_out(#fff, 0.7) 100%
    );
    content: "";
    display: block;
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2;
  }

  &:hover,
  &:focus {
    &::before {
      animation: shine 0.85s;
    }
  }

  @keyframes shine {
    100% {
      left: 125%;
    }
  }
}

.no-link-styling a:hover, a:visited, a:link, a:active {
  text-decoration: none;
  color: black;
}