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

@layer components {
  /* Text primary */

  .text-primary {
    @apply text-gray-900 dark:text-gray-50;
  }

  /* Text secondary */

  .text-secondary {
    @apply text-gray-500 dark:text-gray-400;
  }

  .text-secondary-active {
    @apply text-primary-600 dark:text-primary-500;
  }

  .text-secondary-hover {
    @apply hover:text-primary-600 hover:dark:text-primary-500;
  }

  .text-secondary-group-hover {
    @apply group-hover:text-primary-600;
  }

  /* Transitions */

  .transition-base {
    @apply duration-100 ease-in-out;
  }

  /* Surface */

  .surface {
    @apply bg-white dark:bg-gray-900;
  }

  .surface-secondary {
    @apply bg-gray-50 dark:bg-opacity-25 dark:bg-gray-800;
  }

  .surface-blurry {
    @apply bg-white/95 backdrop-blur dark:bg-gray-900/95;
  }

  /* Borders */

  .surface-border {
    @apply border-gray-200 dark:border-gray-800;
  }

  .surface-border-hover {
    @apply border-primary-200 dark:border-gray-700;
  }

  .surface-border-header {
    @apply border-b border-gray-200 border-opacity-50 dark:border-gray-800;
  }

  /* Icons */

  .icon-base {
    @apply transition-base text-secondary text-secondary-hover transition-colors;
  }

  /* Code blocks */

  .code-background {
    /* background-color: var(--codeblocks-background); */
    @apply bg-gray-800;
  }

  /* Images */

  .light-img {
    @apply block dark:hidden;
  }

  .dark-img {
    @apply hidden dark:block;
  }

  /* Link */

  .link {
    @apply hover:text-secondary-hover transition-colors transition-base;
  }
}

/* Variables */
:root {
  --header-height: theme('spacing.14');
  --footer-height: 8rem;
  --codeblocks-background: theme("colors.gray.900");
}

@screen sm {
  :root {
    --header-height: theme('spacing.18');
    --footer-height: 4rem;
  }
}

html {
  @apply text-primary antialiased font-sans min-h-screen overflow-y-scroll bg-white;

  /* Scrollbar settings */
  --scrollbar-track: theme('colors.gray.300');
  --scrollbar-thumb: theme('colors.gray.200');

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

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

  &::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: .25rem
  }

  &.dark {
    @apply bg-gray-900;
    --scrollbar-track: theme('colors.gray.900');
    --scrollbar-thumb: theme('colors.gray.800');
  }
}

body {
  @apply min-h-screen font-sans text-gray-700 antialiased dark:text-gray-200;
}

.docus-content {
  & > :first-child {
    margin-top: 0 !important;
  }
}