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

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

.title {
  @include deprecated.big-title-typography;

  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);
  overflow-wrap: break-word;

  @include deprecated.body-small-typography;

  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;
}