@use "@/styles/variables";

:root {
  --logo-hue: 220;
  --logo-sat: 50%;
  --logo-primary: hsl(var(--logo-hue) var(--logo-sat) 40%);
  --logo-secondary: hsl(var(--logo-hue) var(--logo-sat) 40% / 0.6);
  --logo-text: var(--logo-primary);

  &[data-theme^="dark"] {
    --logo-sat: 50%;
    --logo-primary: hsl(var(--logo-hue) var(--logo-sat) 60%);
    --logo-secondary: hsl(var(--logo-hue) 60% 60% / 0.8);
  }
}

.scrollbar {
  --scrollbar-width: 16px;
  --scrollbar-thumb-color: var(--cmm-color-gray-3);
  --scrollbar-thumb-color-hover: var(--cmm-color-gray-4);

  scrollbar-color: var(--scrollbar-thumb-color) transparent;

  [data-theme^="dark"] & {
    --scrollbar-thumb-color: var(--cmm-color-gray-7);
    --scrollbar-thumb-color-hover: var(--cmm-color-gray-6);
  }

  &::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 999px;
    border: 5px solid transparent;
    background-clip: content-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-color-hover);
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

.hash-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-left: 0.3em;
  border-radius: var(--cmm-radius-sm);
  opacity: 0;

  &:focus {
    opacity: 1;
  }

  svg {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    color: var(--cmm-color-neutral-5);
  }

  :where(h1, h2, h3, h4, h5, h6):hover & {
    opacity: 1;
  }
}

.remark-code-title {
  margin-top: 2rem;
  border-top-left-radius: var(--cmm-radius-xl);
  border-top-right-radius: var(--cmm-radius-xl);
  background-color: var(--cmm-color-surface-2);
  border: 1px solid var(--cmm-color-border-base);
  color: var(--cmm-color-font-muted);
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: var(--cmm-font-size-xs);
  font-family: var(--cmm-font-family-code);

  + .code-block pre {
    margin-top: 0;
  }

  + .code-block pre > code {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

code {
  font-family: var(--cmm-font-family-code);
}

.Message {
  border-radius: var(--cmm-radius-xl);
}
