@import "../../themes/index";
$wcontainer-prefix: '.#{$base-prefix}-wcontainer';

$wcontainer-bg-color: getVar(widgets-container-background, $widgets-container-background);

$wcontainer-title-color: getVar(widgets-container-title, $widgets-container-title);
$wcontainer-title-font-size: getVar(widgets-font-size-3, $widgets-font-size-3);

$wcontainer-split-line: getVar(widgets-container-split-line, $widgets-container-split-line);
$wcontainer-title-border-color: getVar(widgets-color-blue, $widgets-color-blue);

$wcontainer-extra-color: getVar(widgets-color-text-2, $widgets-color-text-2);
$wcontainer-extra-color-hover: getVar(widgets-color-text-1, $widgets-color-text-1);
$wcontainer-extra-font-size: getVar(widgets-font-size-1, $widgets-font-size-1);

$wcontainer-padding: getVar(widgets-container-padding, $widgets-container-padding);
$wcontainer-mobile-padding: getVar(widgets-container-mobile-padding, $widgets-container-mobile-padding);

$wcontainer-corner-radius: getVar(widgets-container-corner-radius, $widgets-container-corner-radius);

$wcontainer-shadow: getVar(widgets-container-shadow, $widgets-container-shadow);

$wcontainer-cross-size-1: getVar(s1, $s1);
$wcontainer-cross-size-2: getVar(s3, $s3);

$wcontainer-error-color: getVar(widgets-color-red, $widgets-color-red);


// Media queries 断点枚举
// Two Extra small screen / phone
$grid-xxs: 320px !default;
// Extra small screen / phone
$grid-xs: 480px !default;
// Small screen / tablet
$grid-s: 720px !default;
// Medium screen / desktop
$grid-m: 990px !default;
// Large screen / desktop
$grid-l: 1200px !default;
// Extra Large screen / desktop
$grid-xl: 1500px !default;

$grid-columns: 24 !default;
$grid-columns-5p: 5 !default;
$grid-columns-fixed: 30 !default;
$grid-col-fixed-width: $s5 !default;

// 栅格各列之间的内间距
$grid-gutter: $s2 !default;
// 栅格与最外层容器之间的外间距
$grid-space-xxs: $s3 !default;
$grid-space-xs: $s3 !default;
$grid-space-s: $s4 !default;
$grid-space-m: $s4 !default;
$grid-space-l: $s4 !default;
$grid-space-xl: $s4 !default;

// 断点选择器宽度计算和枚举
$breakpoints: ((
        "xxs",
        "(min-width: " + ($grid-xxs + $grid-space-xxs * 2) + ")",
        "(max-width: " + ($grid-xs + $grid-space-xs * 2 - 1) + ")"
), (
        "xs",
        "(min-width: " + ($grid-xs + $grid-space-xs * 2) + ")",
        "(max-width: " + ($grid-s + $grid-space-s * 2 - 1) + ")"
), (
        "s",
        "(min-width: " + ($grid-s + $grid-space-s * 2) + ")",
        "(max-width: " + ($grid-m + $grid-space-m * 2 - 1) + ")"
), (
        "m",
        "(min-width: " + ($grid-m + $grid-space-m * 2) + ")",
        "(max-width: " + ($grid-l + $grid-space-l * 2 - 1) + ")"
), (
        "l",
        "(min-width: " + ($grid-l + $grid-space-l * 2) + ")",
        "(max-width: " + ($grid-xl + $grid-space-xl * 2 - 1) + ")"
), (
        "xl",
        "(min-width: " + ($grid-xl + $grid-space-xl * 2) + ")",
        ""
));