@import '@fumadocs/ui/css/base.css';

/* TODO: remove them on next major */
@import './layouts/docs.css';
@import './layouts/home.css';
@import './layouts/notebook.css';

@source '../dist/*.js';
@source '../dist/{components,contexts,provider,utils}/**/*.js';
@source '../dist/layouts/shared/**/*.js';

@theme {
  --animate-fd-collapsible-down: fd-collapsible-down 150ms cubic-bezier(0.45, 0, 0.55, 1);
  --animate-fd-collapsible-up: fd-collapsible-up 150ms cubic-bezier(0.45, 0, 0.55, 1);

  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;

  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;

  @keyframes fd-collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes fd-collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fd-accordion-down {
    from {
      height: 0;
      opacity: 0.5;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes fd-accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
      opacity: 0.5;
    }
  }

  @keyframes fd-nav-menu-in {
    from {
      opacity: 0;
      height: 0px;
    }
    to {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
  }

  @keyframes fd-nav-menu-out {
    from {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
    to {
      opacity: 0;
      height: 0px;
    }
  }
}

@property --radix-collapsible-content-height {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}