@use "common/refactor/common-refactor.scss" as *;

.container {
  display: grid;
  row-gap: 1rem;
  height: 100vh;
  overflow-y: auto;
  padding: 1rem;
}

.title {
  @include bigTitleTipography;
  color: var(--color-foreground-primary);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-template-rows: repeat(auto-fill, 120px);
  gap: 1rem;

  --cell-size: 64px;
}

.gallery-item {
  display: grid;
  place-items: center;
  row-gap: 0.5rem;
  grid-template-rows: var(--cell-size) 1fr;
  padding: 0.5rem;

  color: var(--color-foreground-primary);
  word-break: break-word;
  @include bodySmallTypography;

  svg {
    width: var(--cell-size);
    height: var(--cell-size);
    fill: none;
    color: transparent;
    stroke: var(--color-accent-primary);
  }
}

.cursor {
  width: var(--cell-size);
  height: var(--cell-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}