/** Base: General Styles */

: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: 683px;

    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;
  }
}

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

/** Dark mode */
@include dark {
  .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;
  }
}
