_base.scss

/** Base: General Styles */

@use './tokens.scss' as *;
@use './tokens-overrides' as *;
@use './mixins' as *;

:root {
  --custom-selection-background-color: var(--strapi-primary-600);
}

::selection {
  background-color:  var(--custom-selection-background-color);
  color: var(--custom-selection-color, var(--strapi-neutral-0));
}

main {
  article:first-child:not(.col):not(.custom-doc-card),
  article:first-child:not(.col) + nav {
    --custom-main-px: var(--strapi-spacing-0);
    --custom-main-width: 608px;

    max-width: calc(var(--custom-main-width) + calc(var(--strapi-spacing-4) * 2));
    padding-left: var(--custom-main-px) !important;
    padding-right: var(--custom-main-px) !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/**
 * Experimental: Different identity based on URL
 * DOES NOT SEEM TO WORK ANYMORE, maybe data hydration is done too late?
 */
// html[class*="docs-doc-id-dev-docs"] {
//   .navbar {
//     background-color: var(--strapi-primary-100);
//   }
// }

// html[class*="docs-doc-id-cloud"] {
//   .navbar {
//     background-color: var(--strapi-secondary-100);
//   }

//   .markdown {
//     a {
//       color: var(--strapi-secondary-600);
//     }
//   }

//   .theme-doc-sidebar-item-link:has(.menu__link--active) {
//     background-color: var(--strapi-secondary-100);
//   }
// }

/** Responsive */
@include medium-up {
  main {
    article:first-child:not(.col),
    article:first-child:not(.col) + nav {
      --custom-main-px: var(--strapi-spacing-4);
    }
  }
}

/* Experimental: Another approach to style based on URL
 * depends on folder-detector.js script
 */
// html[data-folder-source="cms"] {
//   a {
//     // color: var(--strapi-primary-600);
//   }
// }

// html[data-folder-source="cloud"] {
//    main a {
//     color: var(--strapi-secondary-500) !important;
//   }
// }

/** Dark mode */
@include dark {
  body {
    background-color: var(--strapi-primary-100);
  }
  
  html, 
  #__docusaurus,
  .main-wrapper {
    background-color: var(--strapi-primary-100);
  }
  
  :root[data-theme='dark'] {
    --ifm-background-color: var(--strapi-primary-100);
  }

  .container img[width="16"] {
    /* 'Temporary' fix while we figure a way to display white icons in dark mode 😅  */
    background-color: white;
    border-radius: 2px;
    padding: 1px;
  }
}