$normalArr: 
   (lightBlue, #fff, map-get($basicColor, lightBlue), map-get($basicColor, lightBlue)),
   (skyBlue, #fff, map-get($basicColor, skyBlue), map-get($basicColor, skyBlue)),
   (moBlue, #fff, map-get($basicColor, moBlue), map-get($basicColor, moBlue)),
   (darkBlue, #fff, map-get($basicColor, darkBlue), map-get($basicColor, darkBlue)),
   (lightPink, #fff, map-get($basicColor, lightPink), map-get($basicColor, lightPink)),
   (cherry, #fff, map-get($basicColor, cherry), map-get($basicColor, cherry)),
   (limeGreen, #fff, map-get($basicColor, limeGreen), map-get($basicColor, limeGreen)),
   (tomatoRed, #fff, map-get($basicColor, tomatoRed), map-get($basicColor, tomatoRed)),
   (earthGold, #fff, map-get($basicColor, earthGold), map-get($basicColor, earthGold)),
;

$outlineArr: 
   (lightBlue, 1px, map-get($basicColor, lightBlue), transparent, map-get($basicColor, lightBlue)),
   (skyBlue, 1px, map-get($basicColor, skyBlue), transparent, map-get($basicColor, skyBlue)),
   (moBlue, 1px, map-get($basicColor, moBlue), transparent, map-get($basicColor, moBlue)),
   (darkBlue, 1px, map-get($basicColor, darkBlue), transparent, map-get($basicColor, darkBlue)),
   (lightPink, 1px, map-get($basicColor, lightPink), transparent, map-get($basicColor, lightPink)),
   (cherry, 1px, map-get($basicColor, cherry), transparent, map-get($basicColor, cherry)),
   (limeGreen, 1px, map-get($basicColor, limeGreen), transparent, map-get($basicColor, limeGreen)),
   (tomatoRed, 1px, map-get($basicColor, tomatoRed), transparent, map-get($basicColor, tomatoRed)),
   (earthGold, 1px, map-get($basicColor, earthGold), transparent, map-get($basicColor, earthGold)),
;


//一般button
@each $class, $color, $bgColor, $border in $normalArr {
   .btn-#{"" + $class} {
      @include normalBtn($color, $bgColor, $border);
   }
}

//線條外框
@each $class, $bdWidth, $color, $bgColor, $bdColor in $outlineArr {
   .btn-outline-#{"" + $class} {
      @include outlineBtn($bdWidth, $color, $bgColor, $bdColor);
      background-color: #fff;
   }
}

.btn-outline-limeGreen {
   &.active {
      color: #fff;
      background-color: #b4d26c;
   }
   &.disabled {
      cursor: not-allowed;
      &:hover {
         background-color: #fff;
         color: #b4d26c;
      }
   }
}