@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$main-color: var(--main-color, orange) !default;
// used as the main color of the all website
$main-color-opacity: var(--main-color-opacity,  rgba(251, 201, 0, 0.59)) !default;
$main-second-color: var(--main-second-color, #ffffff) !default;
// used for some text color as the headers, checked border and background of product attributes and labels
$second-color: #0099ff;
// used for some text color as the headers, checked border and background of product attributes and labels
$border-color: var(--border-color, #acacac) !default;
// the border color for
$background-color: var(--background-color, #F5F5F5) !default;
// the main background color of the params
$input-background-color: var(--input-background-color, #ebebeb) !default;
// the background color for the hovered inputs
$hovered-opacity: 0.6 !default;
$hr-color: var(--hr-color, #adadad) !default;
$top-header-background-color: var(--top-header-background-color, #666666) !default;
$forth-color: var(--fourth-color, #01427f) !default;

$cart-color: $main-color !default;

// green color
$greenColor: var(--greenColor, #368840) !default;
$lightGray: var(--lightGray, rgba(0, 0, 0, .02)) !default;
$borderColor: var(--border-color, rgba(0, 0, 0, .05)) !default;
$lightGrayDark: var(--lightGrayDark,  rgba(0, 0, 0, .1)) !default;
$textColor: var(--textColor , #808080) !default;


@mixin make-container-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      width: $container-max-width;
    }
  }
}