/**------------------------------------------------------------------------
 *                           import settings
 *------------------------------------------------------------------------**/
@use "_settings" as *;

$jane-theme-color: 'azure' !default;
$article-max-width: 40em !default;
$desktop-header-height: 80px !default;
$mobile-header-height: 60px !default;
$logo-font-family: 'Comic Sans MS', -apple-system, 'Open Sans', 'Segoe UI', 'Helvetica', Arial, sans-serif !default;
$title-font-family: -apple-system, 'Open Sans', 'Segoe UI', 'Helvetica', Arial, sans-serif !default;
$global-font-family: -apple-system,'Open Sans', 'Segoe UI', 'Helvetica', Arial, sans-serif !default;
$global-font-size: 18px !default;
$global-mobile-font-size: 15px !default;
$mobile-breakpoint: 768px !default;

/**------------------------------------------------------------------------
 *                           import pico
 *------------------------------------------------------------------------**/
@use "pico/scss/pico" as pico with (
  // Theme color
  $theme-color: $jane-theme-color,

  // !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
  // Prefix for CSS variables
  $css-var-prefix: "--pico-",

  // !default; // Must start with "--"
  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "body",

  // !default;
  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: false,

  //!default;
  // Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
  // Fluid layout if disabled
  $enable-viewport: true,

  // !default;
  // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
  // Fixed spacings by default
  $enable-responsive-spacings: false,

  // !default;
  // Enable responsive typography
  // Fixed root element size (rem) if disabled
  $enable-responsive-typography: true,

  // !default;
  // Enable .classes
  // .classless version if disabled
  $enable-classes: true,

  // !default;
  // Enable transitions
  $enable-transitions: true,

  // !default;
  // Enable overriding with !important
  $enable-important: true,

  // !default;
  // Optional parent selector
  // If defined, all HTML tags are wrapped with this selector
  // :root is not wrapped
  $parent-selector: ".pico",

  // !default;
  // Breakpoints, viewports and root font size
  // $breakpoints: map.deep-merge(
  //   (
  //     // Small (landscape phones)
  //     // Font size: 17px
  //     sm:
  //       (
  //         breakpoint: 576px,
  //         viewport: 510px,
  //         root-font-size: 106.25%,
  //       ),
  //     // Medium (tablets)
  //     // Font size: 18px
  //     md:
  //       (
  //         breakpoint: 768px,
  //         viewport: 700px,
  //         root-font-size: 112.5%,
  //       ),
  //     // Large
  //     // Font size: 19px
  //     lg:
  //       (
  //         breakpoint: 1024px,
  //         viewport: 950px,
  //         root-font-size: 118.75%,
  //       ),
  //     // Extra large
  //     // Font size: 20px
  //     xl:
  //       (
  //         breakpoint: 1280px,
  //         viewport: 1200px,
  //         root-font-size: 125%,
  //       ),
  //     // Extra extra large
  //     // Font size: 21px
  //     xxl:
  //       (
  //         breakpoint: 1536px,
  //         viewport: 1450px,
  //         root-font-size: 131.25%,
  //       )
  //   ),
  //   $breakpoints
  // ),
  // Modules to export
  $modules:
    (
      // Theme
      "themes/default": true,

      // Layout
      "layout/document": true,
      "layout/landmarks": true,
      "layout/container": true,
      "layout/section": true,
      "layout/grid": true,
      "layout/overflow-auto": true,

      // Content
      "content/link": true,
      "content/typography": true,
      "content/embedded": true,
      "content/button": true,
      "content/table": true,
      "content/code": true,
      "content/figure": true,
      "content/miscs": true,

      // Forms
      "forms/basics": true,
      "forms/checkbox-radio-switch": true,
      "forms/input-color": true,
      "forms/input-date": true,
      "forms/input-file": true,
      "forms/input-range": true,
      "forms/input-search": true,

      // Components
      "components/accordion": true,
      "components/card": false,
      "components/dropdown": true,
      "components/group": true,
      "components/loading": true,
      "components/modal": true,
      "components/nav": false,
      "components/progress": true,
      "components/tooltip": true,

      // Utilities
      "utilities/accessibility": true,
      "utilities/reduce-motion": true
    )
);

/**------------------------------------------------------------------------
 *                           import pico colors
 *------------------------------------------------------------------------**/
@use "pico/scss/colors/index" as *;

/**------------------------------------------------------------------------
 *                           base styles
 *------------------------------------------------------------------------**/
@import "_common/utils";
@import "_base";


/**------------------------------------------------------------------------
 *                           partial styles
 *------------------------------------------------------------------------**/
@import "_partial/_header/desktop_header";
@import "_partial/_header/mobile_header";
@import "_partial/icons";
@import "_partial/pagination";
@import "_partial/footer";
@import "_partial/post";
@import "_partial/_widget/index";
@import "_partial/404";
// @import "_partial/tags";
// @import "_partial/categories";
// @import "_partial/back-to-top";
// @import "_partial/author_info";

/**------------------------------------------------------------------------
 *                           page styles
 *------------------------------------------------------------------------**/
@import "_page/home";
@import "_page/archive";
@import "_page/tag_cloud";

/**------------------------------------------------------------------------
 *                           components
 *------------------------------------------------------------------------**/
@import "_components/card";
@import "_components/search";

/**------------------------------------------------------------------------
 *                           shortcodes
 *------------------------------------------------------------------------**/
@import "_shortcodes/highlight";
@import "_shortcodes/notice";

/**------------------------------------------------------------------------
 *                           custom styles
 *------------------------------------------------------------------------**/
@import "_custom";