//===高度
$heightObj: (
   basic: 45px
);

//===間距
$gutter: (
   basic: 20px,
   double: 40px
);

//圓角
$radius: (
   basic: 3px
);

$cisColor: (
   master:#64aeff,
   second:#355785,
   third:#2c2d3b,
   fourth:#a5a5a5,
);
// $cisColor: (
//    master:#e54b4b,
//    second:#493435,
//    third:#674a54,
//    fourth:#efe8d8,
// );

//字體顏色
$basicColor: (
   skyBlue:#009fe7,
   moBlue:#486499,
   pink:#fdebeb,
   cherry:#E31D64,
   limeGreen:#94ac5e,
   tomatoRed:#e74210,
   lightYellow:#fdecbe,
   bananaYellow:#ffcf61,
   silver:#eeeeee,
   gray:#a5a5a5,
);


$textArr: 
   (skyBlue, map-get($basicColor, skyBlue)),
   (moBlue, map-get($basicColor, moBlue)),
   (pink, map-get($basicColor, pink)),
   (cherry, map-get($basicColor, cherry)),
   (limeGreen, map-get($basicColor, limeGreen)),
   (tomatoRed, map-get($basicColor, tomatoRed)),
   (lightYellow, map-get($basicColor, lightYellow)),
   (bananaYellow, map-get($basicColor, bananaYellow)),
   (silver, map-get($basicColor, silver)),
   (gray, map-get($basicColor, gray)),
;

//一般button
@each $class, $color in $textArr {
   .text-#{"" + $class} {
      color: $color !important;
   }
   .bg-#{"" + $class} {
      background-color: $color !important;
   }
   .bd-#{"" + $class} {
      border-style: solid;
      border-color: $color !important;
   }
}

//======extand
%centerFlex {
   display: flex;
   justify-content: center;
   align-items: center;
}

%bwtFlex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

%posCenter {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

%resetForm {
   appearance: none;
}

%clearFix {
   &:after {
      content: '';
      display: block;
      clear: both;
   }
}

//========mixin

@mixin size($w, $h:$w) {
   width: $w;
   height: $h;
}

@mixin basicSize($w, $h) {
   min-width: $w;
   min-height: $h;
}

//指有margin padding能用
@mixin elGutter($key, $value) {
   #{$key}: $value;
   &:last-child {
      #{$key}: 0;
   }
}