@use "sass:map";

//
// Sass variables customization
// --------------------------------------------------
// All Sass vaiables in `_variables.scss` can be overwritten below.
// Due to the limitation of Sass, I don't have variable hoisting feature like
// native CSS or Less at hand, so it's dirty to have two user defined
// stylesheets, hope for native color manipulation in the future.
//
// - This file should contain only Sass variables defined in theme Curtana.
// - CSS varaibles customization should be defined in `_user.scss`.

// Bootstrap overrides
// https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 997px, // Modified from 992 to 997 to match Docusaurus query
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

// Note: Breakpoints migration guide
// Date: Jun 1, 2021, 6:43 AM
// https://getbootstrap.com/docs/5.0/layout/breakpoints/
// How to migrate from Bootstrap 5 media query to native Sass variables and vice versa:
//
// @media (max-width: $breakpoint-sm) ↔ @include media-breakpoint-down(sm)
// @media (max-width: $breakpoint-md) ↔ @include media-breakpoint-down(md)
// @media (max-width: $breakpoint-lg) ↔ @include media-breakpoint-down(lg)
// @media (max-width: $breakpoint-xl) ↔ @include media-breakpoint-down(xl)
//
// @media (min-width: $breakpoint-sm-min ↔ @include media-breakpoint-up(sm)
// @media (min-width: $breakpoint-md-min ↔ @include media-breakpoint-up(md)
// @media (min-width: $breakpoint-lg-min ↔ @include media-breakpoint-up(lg)
// @media (min-width: $breakpoint-xl-min ↔ @include media-breakpoint-up(xl)

// Layout
$breakpoint-sm-min: map.get($grid-breakpoints, sm) !default;
$breakpoint-md-min: map.get($grid-breakpoints, md) !default;
$breakpoint-lg-min: map.get($grid-breakpoints, lg) !default;
$breakpoint-xl-min: map.get($grid-breakpoints, xl) !default;

// Breakpoints used by @media query with `max-width`
$breakpoint-sm: (map.get($grid-breakpoints, sm) - .02px) !default;
$breakpoint-md: (map.get($grid-breakpoints, md) - .02px) !default;
$breakpoint-lg: (map.get($grid-breakpoints, lg) - .02px) !default;
$breakpoint-xl: (map.get($grid-breakpoints, xl) - .02px) !default;