.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
}

.entry {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
}

.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  inline-size: calc(var(--cell) / 2);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;

  &.veiled {
    background-image: url('../../images/veil-subject.jpg');
  }

  &.ruled {
    border: var(--stroke-focus) solid;
  }

  svg {
    inline-size: calc(var(--spacing) * 6);
    block-size: calc(var(--spacing) * 6);
  }
}

.fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--stroke-border) var(--color-border-base-secondary);

  .swatch:has(.glyph) & {
    box-shadow: none;
  }

  .swatch.bare & {
    box-shadow: inset 0 0 0 var(--stroke-border) var(--color-border-base-tertiary);
  }
}

.glyph {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
}

.label {
  position: absolute;
  inset-block-end: calc(var(--spacing) * 1);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1);
}

.scheme {
  display: none;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;

  &[data-scheme='light'] {
    display: flex;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) &[data-scheme='light'] {
      display: none;
    }

    :root:not([data-theme='light']) &[data-scheme='dark'] {
      display: flex;
    }
  }

  :root[data-theme='dark'] &[data-scheme='light'] {
    display: none;
  }

  :root[data-theme='dark'] &[data-scheme='dark'] {
    display: flex;
  }
}

.value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.2;
  color: var(--color-text-base-secondary);
  text-align: center;
  text-wrap: nowrap;
}