/* Favicon generator (/tools/favicon-generator). Loaded only on that page, after tool.css. */

.favicon-setup {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 40rem) {
  .favicon-setup {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.favicon-preview {
  display: grid;
  place-items: center;
  justify-self: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-checker-a);
  background-image: conic-gradient(var(--color-checker-b) 25%, transparent 0 50%, var(--color-checker-b) 0 75%, transparent 0);
  background-size: 16px 16px;
}

.favicon-preview__canvas {
  width: 160px;
  height: 160px;
}

/* A browser tab mock-up showing the 16 px icon as it will appear. */
.browser-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-surface-raised);
  box-shadow: inset 0 -2px 0 var(--color-surface);
}

.browser-tab__title {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favicon-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  list-style: none;
  background-color: var(--color-checker-a);
  background-image: conic-gradient(var(--color-checker-b) 25%, transparent 0 50%, var(--color-checker-b) 0 75%, transparent 0);
  background-size: 16px 16px;
}

.favicon-icons__item {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}

.favicon-icons__item span {
  padding: 0 var(--space-1);
  border-radius: calc(var(--radius) / 2);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.code-block {
  overflow-x: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre;
}