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

::-moz-selection {
  color: theme(colors.white);
  background: theme(colors.pink.500);
}

::selection {
  color: theme(colors.white);
  background: theme(colors.pink.500);
}

.icon-inline svg {
  @apply inline;
}

.active,
.active svg {
  color: theme(colors.teal.700);
}

.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);
  @apply ease-in-out;
  @apply duration-300;
}

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

p > a,
span > a,
blockquote > a,
li > a {
  text-decoration: underline !important;
}

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

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

.tag--button {
  @apply font-semibold;
  @apply py-2;
  @apply px-4;
  @apply mr-4;
  @apply mb-4;
  @apply rounded-full;
  @apply text-white;
  @apply ease-in-out;
  @apply duration-300;
  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;
}

.tag--button:hover,
.tag--button:active,
.tag--button:focus {
  background: theme(colors.pink.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--20 > svg {
  @apply h-5;
  @apply w-5;
}

.icon--24 > svg {
  @apply h-6;
  @apply w-6
}

.icon--28 > svg {
  @apply h-7;
  @apply w-7;
}

.icon--32 > svg {
  @apply h-8;
  @apply w-8;
}

.icon--bold > svg {
  stroke-width: 2;
}

.link--icon > svg {
  color: theme(colors.gray.700);
  @apply ease-in-out;
  @apply duration-300;
}

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

@media (prefers-color-scheme: dark) {
  .active,
  .active svg {
    color: theme(colors.teal.300);
  }

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

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

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

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