@use './common/colors' as colors;
@use './common/easing' as easing;
@use './common/typography' as typography;
@use './common/shadows' as shadows;
@use './common/spacing' as spacing;
@use './common/utils' as utils;
@use './common/properties';

@mixin theme($root: neo-theme-root) {
  [#{$root}] {
    color: var(--neo-text-color);
    font-family: var(--neo-font-family), sans-serif;
    line-height: var(--neo-line-height);
    background-color: var(--neo-background-color);

    /* touch highlight */
    -webkit-tap-highlight-color: transparent;

    @include easing.easing;
    @include utils.utils;
    @include utils.z-index;
    @include spacing.spacing;
    @include typography.typography;
    @include utils.filters;
    @include colors.colors;
    @include shadows.shadows;
    @include typography.heading;

    /* cursor highlight */
    *::selection {
      background-color: var(--neo-text-highlight-color);
    }

    &[neo-transition='false'] {
      *,
      *::before,
      *::after {
        transition: none !important;
      }
    }

    /* override semantic color if dark mode is enabled */
    &[neo-theme='dark'] {
      @include colors.dark-theme;
    }

    /* apply dark mode if not overridden */
    @media (prefers-color-scheme: dark) {
      &:not([neo-theme='light']) {
        @include colors.dark-theme;
      }
    }

    @media (width <= 768px) {
      --neo-h1-font-size: var(--neo-font-size-xxl);
      --neo-h2-font-size: var(--neo-font-size-xl);
      --neo-h3-font-size: var(--neo-font-size-lg);
      --neo-h4-font-size: var(--neo-font-size-md);
      --neo-h5-font-size: var(--neo-font-size);
    }

    @media (width <= 375px) {
      --neo-h1-font-size: var(--neo-font-size-xl);
      --neo-h2-font-size: var(--neo-font-size-lg);
      --neo-h4-font-size: var(--neo-font-size);
    }
  }
}