/* Color ramps */
.site-ramp {
  display: grid;
  grid-template-columns: calc(var(--qf-space-10) * 4) repeat(11, minmax(0, 1fr));
  gap: var(--qf-space-1);
  align-items: center;
  margin-bottom: var(--qf-space-2);
}
.site-ramp__token,
.site-token-name {
  font-size: calc(var(--qf-text-xs) * 5 / 6);
}
.site-swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--qf-space-12);
  padding: var(--qf-space-1);
  border: var(--qf-border-width) solid color-mix(in srgb, var(--qf-palette-gray-900) 8%, transparent);
  border-radius: var(--qf-radius-sm);
  color: var(--qf-palette-gray-600);
  font-family: var(--qf-font-family-mono);
  font-size: calc(var(--qf-text-xs) * 5 / 6);
}
/* The step label is text, so it needs 4.5:1 (1.4.3) on every step in every theme. Black or white
   always reaches it on one side of mid-grey; docs.js sets data-ink from the rendered colour. */
.site-swatch[data-ink='dark'] {
  color: var(--qf-palette-black);
}
.site-swatch[data-ink='light'] {
  color: var(--qf-palette-white);
}
.site-swatch[data-main]::after {
  content: 'main';
  position: absolute;
  inset-block-start: var(--qf-space-1);
  inset-inline-end: var(--qf-space-1);
  padding: 0 var(--qf-space-1);
  border-radius: var(--qf-radius-xs);
  background: color-mix(in srgb, var(--qf-surface) 85%, transparent);
  color: var(--qf-ink);
  font-size: calc(var(--qf-text-xs) * 3 / 4);
}

/* Semantic aliases */
.site-semantic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--qf-space-5) * 9), 1fr));
  gap: var(--qf-space-2);
}
.site-semantic__item {
  display: flex;
  align-items: center;
  gap: var(--qf-space-2);
  padding: var(--qf-space-2);
}
.site-semantic__chip {
  flex: none;
  width: var(--qf-space-8);
  height: var(--qf-space-8);
  border: var(--qf-border-width) solid color-mix(in srgb, var(--qf-palette-gray-900) 10%, transparent);
  border-radius: var(--qf-radius-sm);
}

/* Scales */
.site-scale td {
  vertical-align: middle;
}
.site-space-bar {
  height: var(--qf-space-4);
  border-radius: var(--qf-radius-xs);
  background: var(--qf-color-primary-200);
}

/* Radius and elevation */
.site-radius-box,
.site-shadow-box {
  display: grid;
  place-items: center;
  width: calc(var(--qf-space-10) * 3);
  height: calc(var(--qf-space-10) * 2);
}
.site-shadow-box {
  width: calc(var(--qf-space-10) * 3.5);
  height: calc(var(--qf-space-10) * 2.25);
  margin: var(--qf-space-2);
}

/* Icons */
.site-icon-search {
  width: calc(var(--qf-space-10) * 8);
  max-width: 100%;
}
.site-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--qf-space-6) * 4), 1fr));
  gap: var(--qf-space-1);
}
[data-ds-icon-cell] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qf-space-1);
  padding: var(--qf-space-3) var(--qf-space-1);
  border-radius: var(--qf-radius-sm);
  color: var(--qf-ink-muted);
  font-family: var(--qf-font-family-mono);
  font-size: calc(var(--qf-text-xs) * 3 / 4);
  text-align: center;
  word-break: break-all;
  cursor: pointer;
}
[data-ds-icon-cell]:hover {
  background: var(--qf-surface-hover);
  color: var(--qf-ink);
}
[data-ds-icon-cell] .qf-icon {
  color: var(--qf-ink-secondary);
}

/* Narrow */
@media (max-width: 833px) {
  .site-ramp {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .site-ramp > :first-child {
    grid-column: 1 / -1;
  }
  .site-swatch {
    justify-content: center;
    padding-inline: 0;
  }
  .site-swatch[data-main]::after {
    content: none;
  }
}