/* GLOBAL SPACING SCALE */

/* SIZE TOKENS - Unit-based spacing scale (8px base unit) */
$size-base: var(--c8y-unit-base); // 8px

$size-4: calc(var(--c8y-unit-base) * 0.5); // 4px
$size-5: calc(var(--c8y-unit-base) * 0.625); // 5px (off-grid for legacy compatibility)
$size-8: $size-base; // 8px
$size-10: calc(var(--c8y-unit-base) * 1.25); // 10px (off-grid for legacy compatibility)
$size-16: calc(var(--c8y-unit-base) * 2); // 16px
$size-20: calc(var(--c8y-unit-base) * 2.5); // 20px (off-grid for legacy compatibility)
$size-24: calc(var(--c8y-unit-base) * 3); // 24px
$size-32: calc(var(--c8y-unit-base) * 4); // 32px
$size-40: calc(var(--c8y-unit-base) * 5); // 40px
$size-48: calc(var(--c8y-unit-base) * 6); // 48px
$size-56: calc(var(--c8y-unit-base) * 7); // 56px
$size-64: calc(var(--c8y-unit-base) * 8); // 64px
$size-72: calc(var(--c8y-unit-base) * 9); // 72px
$size-80: calc(var(--c8y-unit-base) * 10); // 80px

/* DEPRECATED - Backwards compatibility aliases (use $size-* instead) */
$margin-base: $size-base;
$margin-4: $size-4;
$margin-8: $size-8;
$margin-16: $size-16;
$margin-24: $size-24;
$margin-32: $size-32;
$margin-40: $size-40;
$margin-48: $size-48;
$margin-56: $size-56;
$margin-64: $size-64;
$margin-72: $size-72;
$margin-80: $size-80;

/* NAVIGATOR */

$navigatorWidth: var(--c8y-navigator-panel-width, 240px);
$navigatorWidth--sm: calc(100% - 35px);
$navigator-title-height: calc(var(--c8y-unit-base) * 6);
$navigator-top-padding: 0;
$navigator-padding-bottom: calc(var(--c8y-unit-base) * 3);

/* TOP MAIN BAR */
$headerHeight: calc(var(--c8y-unit-base) * 8);
$header-bar-height: $headerHeight;

/* MEDIA QUERIES BREAKPOINTS */
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs: 480px;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px;
$screen-sm-min: $screen-sm;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 992px;
$screen-md-min: $screen-md;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1200px;
$screen-lg-min: $screen-lg;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
// set maximum width for specific uses
$screen-max-width: 1400px;

//== Grid system
//## Define your custom responsive grid.
//** Number of columns in the grid.
$grid-columns: 12;

//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: $margin-24;

// Grid float breakpoint - Must be defined before usage
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-lg;

// Navbar collapse
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);

//== Container sizes
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
$container-tablet: calc(720px + $grid-gutter-width);
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet;
// Medium screen / desktop
$container-desktop: calc(940px + $grid-gutter-width);
//** For `$screen-md-min` and up.
$container-md: $container-desktop;
// Large screen / wide desktop
$container-large-desktop: calc(1140px + $grid-gutter-width);
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop;