.horizontal-library-game-card {
  --horizontal-library-game-card-progress-color: var(--alert);
  --horizontal-library-game-card-progress-value: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 4);
  border: 1px solid transparent;
  border-radius: calc(var(--spacing-unit) * 2);
  background-color: transparent;
  outline: none;
  outline-offset: 3px;
  overflow: hidden;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    outline-color 0.2s ease-in-out;

  &__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 460 / 215;
    border-radius: var(--spacing-unit);
    background-color: var(--surface);
    overflow: hidden;

    &-placeholder {
      width: 100%;
      height: 100%;
      display: block;
    }

    .horizontal-library-game-card__cover-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, transparent 50%);
      opacity: 0.65;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }
  }

  &__logo {
    position: absolute;
    top: 50%;
    left: calc(var(--spacing-unit) * 4);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: min(58%, 320px);
    max-width: min(58%, 320px);
    height: 100px;
    pointer-events: none;
  }

  &__logo-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  }

  &__logo-fallback {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: white;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  }

  &__cover-placeholder {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
      ),
      var(--secondary);
  }

  &__body {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
    padding: 0 0 calc(var(--spacing-unit) * 2);
    transition: padding 0.2s ease-in-out;
  }

  &__info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
  }

  &__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
  }

  &__title,
  &__subtitle,
  &__progress-label span {
    margin: 0;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
  }

  &__title,
  &__subtitle,
  &__progress-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__title {
    color: var(--text);
    font-weight: 700;
  }

  &__subtitle {
    color: var(--text-secondary);
    font-weight: 400;
  }

  &__progress {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex: 1;

    &--placeholder {
      visibility: hidden;
    }
  }

  &__progress-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    color: color-mix(
      in srgb,
      var(--horizontal-library-game-card-progress-color) 70%,
      white
    );
    font-weight: 400;
  }

  &__progress-track {
    position: relative;
    width: calc(var(--spacing-unit) * 50);
    height: var(--spacing-unit);
    border-radius: 999px;
    background-color: color-mix(
      in srgb,
      var(--horizontal-library-game-card-progress-color) 20%,
      transparent
    );
    overflow: hidden;
    flex-shrink: 0;

    &::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: calc(100% * var(--horizontal-library-game-card-progress-value));
      border-radius: inherit;
      background-color: var(--horizontal-library-game-card-progress-color);
      z-index: 1;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      z-index: 2;
    }
  }

  &__action {
    display: flex;
    align-items: center;
    max-width: 0;
    opacity: 0;
    flex-shrink: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-width 0.2s ease-in-out,
      opacity 0.2s ease-in-out;
  }

  &:hover,
  &:focus-within,
  &--force-hovered,
  [data-focused="true"] > &,
  [data-focus-visible="true"] > & {
    background-color: var(--surface);
    border-color: var(--secondary-border);

    .horizontal-library-game-card__cover::before {
      opacity: 1;
    }

    .horizontal-library-game-card__body {
      padding-inline: calc(var(--spacing-unit) * 2);
    }

    .horizontal-library-game-card__action {
      max-width: calc(var(--spacing-unit) * 11);
      opacity: 1;
      pointer-events: auto;
    }
  }

  [data-focus-visible="true"] > & {
    outline: 2px solid var(--primary);
  }

  &--completed {
    .horizontal-library-game-card__progress-track {
      &::before {
        opacity: 0;
        inset: 0 auto 0 -62%;
        width: 62%;
        background: linear-gradient(
          100deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.03) 10%,
          rgba(255, 255, 255, 0.08) 26%,
          rgba(255, 255, 255, 0.16) 40%,
          rgba(255, 255, 255, 0.25) 50%,
          rgba(255, 255, 255, 0.16) 60%,
          rgba(255, 255, 255, 0.08) 74%,
          rgba(255, 255, 255, 0.03) 90%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: horizontal-library-game-card-complete-shine 1.7s
          cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
    }
  }
}

@keyframes horizontal-library-game-card-complete-shine {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  14% {
    opacity: 0.5;
  }

  82% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translateX(262%);
  }
}

@media (max-width: 720px) {
  .horizontal-library-game-card {
    &__body {
      align-items: flex-start;
      flex-direction: column;
      padding: 0 0 calc(var(--spacing-unit) * 2);
    }

    &__action {
      align-self: flex-end;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizontal-library-game-card--completed
    .horizontal-library-game-card__progress-track::before {
    animation: none;
    opacity: 0;
  }
}
