.card {
  background-color: transparent;
  border-color: rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.38));
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.card:hover,
.card:focus-within {
  background-color: transparent;
  border-color: rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.62));
}

.bookmarkButton:focus-visible {
  outline: 2px solid var(--mantine-primary-color-filled);
  outline-offset: 2px;
  border-radius: var(--mantine-radius-sm);
}

.card:hover > div > div.bookmarkIcon {
  background-color: var(--mantine-color-iconColor-filled-hover);
}

.bookmarkButton:focus-visible .bookmarkIcon {
  background-color: var(--mantine-color-iconColor-filled-hover);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

.compactScrollViewport > div {
  display: flex !important;
  width: 100%;
  min-height: 100%;
}

.compactScrollContent {
  flex: 1;
  min-width: 100%;
  min-height: 100%;
}