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

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

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

//字體顏色
$basicColor: (
   lightBlue:#b2c4ce,
   skyBlue:#5b7b94,
   moBlue:#486499,
   darkBlue:#345068,
   lightPink:#f1e6e2,
   cherry:#E31D64,
   mintGreen:#f2f8e7,
   limeGreen:#94ac5e,
   tomatoRed:#f85d5d,
   earthGold:#BC9F75,
   silver:#eeeeee,
   gray:#b1b3b6
);


$textArr: 
   (lightBlue, map-get($basicColor, lightBlue)),
   (skyBlue, map-get($basicColor, skyBlue)),
   (moBlue, map-get($basicColor, moBlue)),
   (darkBlue, map-get($basicColor, darkBlue)),
   (lightPink, map-get($basicColor, lightPink)),
   (cherry, map-get($basicColor, cherry)),
   (mintGreen, map-get($basicColor, mintGreen)),
   (limeGreen, map-get($basicColor, limeGreen)),
   (tomatoRed, map-get($basicColor, tomatoRed)),
   (earthGold, map-get($basicColor, earthGold)),
   (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;
   }
}