:root {
  --font-sans: "Inter", sans-serif;
  --font-mono: "Roboto Mono", monospace;
  --body-font-size: 0.75rem;
  --body-line-height: 1rem;
  --accent-color: theme("colors.purple.500");
  --accent-light-color: theme("colors.purple.400");
  --accent-dark-color: theme("colors.purple.600");
  --accent-contrast-color: theme("colors.white");
}

:root {
  --primary-color: theme("colors.white");
  --primary-light-color: theme("colors.true-gray.50");
  --primary-dark-color: theme("colors.true-gray.100");
  --secondary-color: theme("colors.true-gray.500");
  --secondary-light-color: theme("colors.true-gray.400");
  --secondary-dark-color: theme("colors.true-gray.900");
  --divider-color: theme("colors.true-gray.200");
  --divider-light-color: theme("colors.true-gray.100");
  --divider-dark-color: theme("colors.true-gray.300");
  --error-color: theme("colors.yellow.100");
  --tooltip-color: theme("colors.true-gray.800");
  --popover-color: theme("colors.white");
}

:root.dark {
  --primary-color: theme("colors.true-gray.900");
  --primary-light-color: theme("colors.dark.600");
  --primary-dark-color: theme("colors.true-gray.800");
  --secondary-color: theme("colors.true-gray.400");
  --secondary-light-color: theme("colors.true-gray.500");
  --secondary-dark-color: theme("colors.true-gray.100");
  --divider-color: theme("colors.true-gray.800");
  --divider-light-color: theme("colors.dark.500");
  --divider-dark-color: theme("colors.dark.300");
  --error-color: theme("colors.warm-gray.800");
  --tooltip-color: theme("colors.true-gray.100");
  --popover-color: theme("colors.dark.700");
}

:root {
  @apply antialiased;

  accent-color: var(--accent-color);
  font-variant-ligatures: common-ligatures;
}

::-webkit-scrollbar-track {
  @apply bg-accent;
}

::-webkit-scrollbar-thumb {
  @apply bg-divider bg-clip-content;
  @apply rounded-full;
  @apply border-solid border-transparent border-4;
  @apply hover:(bg-dividerDark bg-clip-content) ;
}

::-webkit-scrollbar {
  @apply w-4;
  @apply h-4;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  @apply hidden;
}

*,
*::before,
*::after {
  @apply backface-hidden;
}

::selection {
  @apply bg-accentDark;
  @apply text-accentContrast;
}

input::placeholder,
textarea::placeholder {
  @apply text-secondary;
  @apply opacity-35;
}

input,
textarea {
  @apply text-secondaryDark;
  @apply font-medium;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-primary;
  @apply text-secondary;
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;

  animation: fade 300ms forwards;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@keyframes fade {
  0% {
    @apply opacity-0;
  }

  100% {
    @apply opacity-100;
  }
}

.fade-enter-active,
.fade-leave-active,
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
  @apply transition-opacity;
}

.fade-enter,
.fade-leave-to,
.page-enter,
.page-leave-to,
.layout-enter,
.layout-leave-to {
  @apply opacity-0;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;

  @apply font-sans;
  @apply font-semibold;
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  @apply bg-teal-600 opacity-75;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

.btn {
  @apply rounded cursor-pointer bg-teal-600 text-white
    py-1 px-4 inline-block
    hover:bg-teal-700
    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
}

.icon-btn {
  @apply cursor-pointer opacity-75 transition
    ease-in-out duration-200 inline-block select-none
    hover:opacity-100 hover:text-teal-600;
  font-size: 0.9em;
}

.buttonPrimary {
  @apply bg-accent rounded font-bold text-accentContrast py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-accentDark focus:outline-none focus-visible:bg-accentDark;
}

.buttonSecondary {
  @apply rounded font-semibold py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark;
}

.buttonSecondaryFilled {
  @apply bg-primaryLight;
}

.inputPrimary {
  @apply flex flex-1;
  @apply bg-primaryLight;
  @apply rounded py-2 px-4;
  @apply font-semibold;
  @apply font-sans;
  @apply focus:outline-none;
  @apply focus-visible:border-dividerDark;
  @apply focus-visible:bg-primary;
  @apply border;
  @apply border-divider;
  @apply hover:border-dividerDark;
}

.selectPrimary {
  @apply bg-primaryLight;
  @apply rounded py-2 px-4;
  @apply font-semibold;
  @apply font-sans;
  @apply focus:outline-none;
  @apply appearance-none;
  @apply focus-visible:border-dividerDark;
  @apply focus-visible:bg-primary;
  @apply border;
  @apply border-divider;
  @apply hover:border-dividerDark;
}
