:root {
  --color-bg: #fff;

  --kbd-border: #d1d5da;

  --color-primary: theme('colors.red.600');
  --color-primary-deep: theme('colors.red.700');

  --color-subtle: theme('colors.gray.200');

  --fg-shallow: theme('colors.gray.400');
  --fg: theme('colors.gray.700');
  --fg-deep: theme('colors.gray.800');
  --fg-deeper: theme('colors.gray.900');
}

html {
  background-color: var(--color-bg);
  color: var(--fg);
}

html.dark {
  --color-bg: theme('colors.black');

  --kbd-border: theme('colors.gray.600');

  --color-primary: theme('colors.red.500');
  --color-primary-deep: theme('colors.red.400');

  --color-subtle: theme('colors.gray.800');

  --fg-shallow: theme('colors.gray.500');
  --fg: theme('colors.gray.300');
  --fg-deep: theme('colors.gray.200');
  --fg-deeper: theme('colors.gray.100');

  .prose {
    --color-primary: theme('colors.gray.100');
  }
}

.prose a {
  color: var(--color-primary);
  &:hover {
    &, & > kbd {
      text-decoration: underline;
    }
  }
}

.icon-next {
  @apply ml-1;
}

.icon-prev {
  @apply mr-1;
}

.icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: var(--fg);
  transform: translateY(1px);
}

kbd {
  background-color: var(--prism-background);
  border: 1px solid var(--kbd-border);
  border-bottom-color: var(--kbd-border);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--kbd-border);
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.9rem;
  line-height: 10px;
  padding: 5px;
  vertical-align: middle;
  margin-top: 0!important;
}

code kbd {
  font-size: 0.7rem;
  padding: 2px 5px;
}

.prose code {
  margin: 0;
  border-radius: 3px;
  padding: .25rem .5rem;
  font-size: .85em;
  color: var(--prism-foreground);
  background-color: var(--prism-background);
}


