/* Base */
@import './base/brand-colors.css';
@import './base/html.css';
@import './base/fonts.css';

/* Page frame */
@import './components/frame/container.css';
@import './components/frame/page-header.css';
@import './components/frame/breadcrumbs.css';

/* Sections */
@import './components/sections/pagination.css';
@import './components/sections/gallery.css';

/* Typography-related things. */
@import './components/typography/defaults.css';
@import './components/typography/link.css';
@import './components/typography/tag.css';
@import './components/typography/table.css';

/* Buttons */
@import './components/button/base.css';
@import './components/button/super.css';
@import './components/button/link.css';

/* Form elements */
@import './components/form-elements/autocomplete.css';
@import './components/form-elements/checkbox.css';
@import './components/form-elements/dropdown.css';
@import './components/form-elements/fieldset.css';
@import './components/form-elements/help-box.css';
@import './components/form-elements/info.css';
@import './components/form-elements/input.css';
@import './components/form-elements/label.css';
@import './components/form-elements/radio.css';
@import './components/form-elements/slider.css';
@import './components/form-elements/stepper-nav.css';
@import './components/form-elements/text-toggle-switch.css';
@import './components/form-elements/toggle-switch.css';
@import './components/form-elements/weekday-percentage-input.css';

/* Search */
@import './components/search/search-results.css';

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

body {
  @apply font-sans;
}

@layer utilities {
  .grid-area-m {
    grid-area: M;
  }

  .grid-area-l {
    grid-area: L;
  }

  .grid-area-n {
    grid-area: N;
  }

  .animation-state-running {
    animation-play-state: running;
  }

  .animation-state-paused {
    animation-play-state: paused;
  }
}