/* Site overlay for Kansleri Cookie Consent: rails colours, type and buttons. */

.kncc-banner,
.kncc-floating-btn {
  --kncc-banner-bg: var(--gh-bg, var(--bg));
  --kncc-heading: var(--gh-text, var(--heading));
  --kncc-body: var(--gh-subtle, var(--text));
  --kncc-primary: var(--gh-text, var(--heading));
  --kncc-primary-text: var(--gh-bg, var(--bg));
  --kncc-primary-hover: var(--gh-subtle, var(--accent));
  --kncc-secondary: transparent;
  --kncc-secondary-text: var(--gh-text, var(--heading));
  --kncc-secondary-hover: color-mix(in srgb, var(--gh-text, var(--heading)) 8%, transparent);
}

.kncc-banner,
.kncc-banner .kncc-heading,
.kncc-banner .kncc-desc,
.kncc-banner .kncc-btn,
.kncc-banner .kncc-policy-link,
.kncc-banner .kncc-category__label,
.kncc-banner .kncc-category__desc,
.kncc-banner .kncc-category__empty-note,
.kncc-floating-btn {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}

.kncc-banner .kncc-heading {
  color: var(--kncc-heading) !important;
  font-weight: 600 !important;
}

.kncc-banner .kncc-desc,
.kncc-banner .kncc-category__desc,
.kncc-banner .kncc-category__empty-note {
  color: var(--kncc-body) !important;
  font-style: normal !important;
}

.kncc-banner .kncc-category__label,
.kncc-banner .kncc-category__name {
  color: var(--kncc-heading) !important;
}

.kncc-banner--bar,
.kncc-banner--modal .kncc-inner,
.kncc-banner--corner .kncc-inner {
  background: var(--kncc-banner-bg);
  border: 1px solid var(--gh-border, var(--border));
  border-radius: 0;
  box-shadow: none;
}

.kncc-banner--bar {
  box-shadow: none;
}

.kncc-overlay {
  background: color-mix(in srgb, var(--gh-bg, #000) 70%, transparent);
}

.kncc-btn {
  border-radius: 6px;
  font-weight: 600 !important;
  border: 1px solid color-mix(in srgb, var(--gh-border, var(--border)) 85%, var(--gh-text, var(--heading)));
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.kncc-btn--primary {
  background: var(--kncc-primary);
  border-color: var(--kncc-primary);
  color: var(--kncc-primary-text);
}

.kncc-btn--primary:hover {
  background: var(--kncc-primary-hover);
  border-color: var(--kncc-primary-hover);
  color: var(--kncc-primary-text);
  box-shadow: none;
}

.kncc-btn--secondary {
  background: var(--kncc-secondary);
  color: var(--kncc-secondary-text);
}

.kncc-btn--secondary:hover {
  background: var(--kncc-secondary-hover);
  border-color: var(--gh-muted, var(--muted));
  color: var(--kncc-heading);
}

.kncc-btn--link {
  border-color: transparent;
  color: var(--gh-muted, var(--muted));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kncc-btn--link:hover,
.kncc-btn--link:focus-visible {
  background: transparent;
  color: var(--kncc-heading);
  border-color: transparent;
}

.kncc-banner-close {
  color: var(--gh-muted, var(--muted));
  border-radius: 0;
}

.kncc-banner-close:hover,
.kncc-banner-close:focus-visible {
  background: color-mix(in srgb, var(--gh-text, var(--heading)) 8%, transparent);
  color: var(--kncc-heading);
}

.kncc-policy-link {
  color: var(--gh-text, var(--heading));
}

.kncc-policy-link:hover {
  color: var(--gh-muted, var(--muted));
}

.kncc-details {
  border-top: 1px solid var(--gh-border, var(--border));
}

.kncc-category__toggle {
  border-color: var(--gh-muted, var(--muted));
  border-radius: 11px;
}

.kncc-category__toggle::after {
  background: var(--gh-muted, var(--muted));
  box-shadow: none;
}

.kncc-category__check:checked + .kncc-category__toggle {
  background: var(--kncc-primary);
  border-color: var(--kncc-primary);
}

.kncc-category__check:checked + .kncc-category__toggle::after {
  background: var(--kncc-primary-text);
}

.kncc-floating-btn {
  border: 1px solid var(--gh-border, var(--border));
  border-radius: 0;
  background: var(--kncc-banner-bg);
  color: var(--kncc-heading);
  box-shadow: none;
}

/* The cookie is lines only (src/components/CookieConsent.astro). A fill on the whole
   svg made the plugin's old outline circle a solid disc. */
.kncc-floating-btn svg {
  color: var(--kncc-heading) !important;
  stroke: var(--kncc-heading) !important;
  fill: none !important;
}

.kncc-floating-btn:hover {
  background: color-mix(in srgb, var(--gh-text, var(--heading)) 8%, var(--kncc-banner-bg));
  transform: none;
  box-shadow: none;
  border-color: var(--gh-muted, var(--muted));
}

.kncc-btn:focus-visible,
.kncc-banner-close:focus-visible,
.kncc-floating-btn:focus-visible {
  outline: 2px solid var(--gh-link, var(--accent));
  outline-offset: 2px;
}