@tailwind base;
@tailwind components;
@tailwind utilities;

::-moz-selection {
  color: theme(colors.white);
  background: theme(colors.purple.400);
}

::selection {
  color: theme(colors.white);
  background: theme(colors.purple.400);
}

.icon-inline svg {
  @apply inline;
}

.active,
.active svg {
  color: theme(colors.purple.600) !important;
}

.active:hover,
.active:active,
.active:focus {
  color: theme(colors.purple.500) !important;
}

.header-anchor {
  text-decoration: none !important;
}

h1 > a.header-anchor {
  font-weight: 800;
}

h2 > a.header-anchor {
  font-weight: 700;
}

a,
.prose a {
  color: theme(colors.purple.600);
}

a:hover,
a:focus,
a:active,
.prose a:hover,
.prose a:focus,
.prose a:active {
  color: theme(colors.purple.500);
}

code {
  @apply text-gray-50;
  border-radius: .25rem;
  padding: .25rem;
}

pre {
  border: 1px solid theme(colors.gray.700);
}

.dark code,
.dark pre {
  @apply bg-gray-900;
}

.tag--button {
  @apply font-semibold;
  @apply py-2;
  @apply px-4;
  @apply mr-4;
  @apply mb-4;
  @apply rounded-full;
  @apply text-white;
  background: theme(colors.purple.600);
}

.tag--button.tag--button__small {
  @apply py-1;
  @apply px-2;
  @apply mr-2;
  @apply mb-2;
  @apply text-sm;
  @apply inline-block;
}

.dark .tag--button {
  color: theme(colors.gray.900);
  background: theme(colors.purple.400);
}

.tag--button:hover,
.tag--button:active,
.tag--button:focus {
  background: theme(colors.purple.500);
}

code[class*=language-], pre[class*=language-] {
  font-family: ui-monospace, SFMono-Regular, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
  font-weight: 400 !important;
}

[data-tablericon-name] {
  stroke-width: 1.4;
}

.icon--bold [data-tablericon-name] {
  stroke-width: 2;
}

.link--icon svg {
  color: theme(colors.gray.700)
}

.link--icon:hover svg {
  color: theme(colors.purple.500)
}

@media (prefers-color-scheme: dark) {
  .active,
  .active svg {
    color: theme(colors.purple.400) !important;
  }

  a,
  .prose a {
    color: theme(colors.purple.400);
  }

  .link--icon svg {
    color: theme(colors.gray.200)
  }

  .link--icon:hover svg {
    color: theme(colors.purple.500)
  }
}