// 用法: text-、line-、bg-，然后拼接上下面的颜色(如：.bg-gradual-orange、.bg-mauve.light)
$--red: #e54d42;
$--orange: #FE521F;
$--yellow: #FF8800;
$--olive: #8dc63f;
$--green: #39b54a;
$--cyan: #1cbbb4;
$--blue: #0081ff;
$--purple: #6739b6;
$--mauve: #9c26b0;
$--pink: #e03997;
$--brown: #a5673f;
$--grey: #8799a3;
$--black: #333333;
$--darkGray: #666666;
$--gray: #aaaaaa;
$--ghostWhite: #f1f1f1;
$--white: #ffffff;
/* 浅色 */
$--redLight: #fadbd9;
$--orangeLight: #fde6d2;
$--yellowLight: #fef2ce;
$--oliveLight: #e8f4d9;
$--greenLight: #d7f0db;
$--cyanLight: #d2f1f0;
$--blueLight: #cce6ff;
$--purpleLight: #e1d7f0;
$--mauveLight: #ebd4ef;
$--pinkLight: #f9d7ea;
$--brownLight: #ede1d9;
$--greyLight: #e7ebed;
/* 渐变色 */
$--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
$--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
$--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
$--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
$--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
$--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);

.text-red,
.line-red {
  color: ($--red);
}

.text-orange,
.line-orange {
  color: ($--orange);
}

.text-yellow,
.line-yellow {
  color: ($--yellow);
}

.text-olive,
.line-olive {
  color: ($--olive);
}

.text-green,
.line-green {
  color: ($--green);
}

.text-cyan,
.line-cyan {
  color: ($--cyan);
}

.text-blue,
.line-blue {
  color: ($--blue);
}

.text-purple,
.line-purple {
  color: ($--purple);
}

.text-mauve,
.line-mauve {
  color: ($--mauve);
}

.text-pink,
.line-pink {
  color: ($--pink);
}

.text-brown,
.line-brown {
  color: ($--brown);
}

.text-grey,
.line-grey {
  color: ($--grey);
}

.text-darkGray,
.line-darkGray {
  color: ($--darkGray);
}

.text-gray,
.line-gray {
  color: ($--gray);
}

.text-ghost-white,
.line-ghost-white {
  color: ($--ghostWhite);
}

.text-black,
.line-black {
  color: ($--black);
}

.text-white,
.line-white {
  color: ($--white);
}

/* ==================
          背景
 ==================== */

.line-red::after {
  border-color: ($--red);
}

.line-orange::after {
  border-color: ($--orange);
}

.line-yellow::after {
  border-color: ($--yellow);
}

.line-olive::after {
  border-color: ($--olive);
}

.line-green::after {
  border-color: ($--green);
}

.line-cyan::after {
  border-color: ($--cyan);
}

.line-blue::after {
  border-color: ($--blue);
}

.line-purple::after {
  border-color: ($--purple);
}

.line-mauve::after {
  border-color: ($--mauve);
}

.line-pink::after {
  border-color: ($--pink);
}

.line-brown::after {
  border-color: ($--brown);
}

.line-grey::after {
  border-color: ($--grey);
}

.line-darkGray::after {
  border-color: ($--darkGray);
}


.line-gray::after {
  border-color: ($--gray);
}

.line-black::after {
  border-color: ($--black);
}

.line-white::after {
  border-color: ($--white);
}

.bg-red {
  background-color: ($--red);
  color: ($--white);
}

.bg-orange {
  background-color: ($--orange);
  color: ($--white);
}

.bg-yellow {
  background-color: ($--yellow);
  color: ($--black);
}

.bg-olive {
  background-color: ($--olive);
  color: ($--white);
}

.bg-green {
  background-color: ($--green);
  color: ($--white);
}

.bg-cyan {
  background-color: ($--cyan);
  color: ($--white);
}

.bg-blue {
  background-color: ($--blue);
  color: ($--white);
}

.bg-purple {
  background-color: ($--purple);
  color: ($--white);
}

.bg-mauve {
  background-color: ($--mauve);
  color: ($--white);
}

.bg-pink {
  background-color: ($--pink);
  color: ($--white);
}

.bg-brown {
  background-color: ($--brown);
  color: ($--white);
}

.bg-grey {
  background-color: ($--grey);
  color: ($--white);
}

.bg-gray {
  background-color: #f0f0f0;
  color: ($--black);
}

.bg-black {
  background-color: ($--black);
  color: ($--white);
}

.bg-white {
  background-color: ($--white);
  color: ($--darkGray);
}

.bg-ghost-white {
  background-color: ($--ghostWhite);
  color: ($--darkGray);
}

.bg-shadeTop {
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
  color: ($--white);
}

.bg-shadeBottom {
  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
  color: ($--white);
}

.bg-red.light {
  color: ($--red);
  background-color: ($--redLight);
}

.bg-orange.light {
  color: ($--orange);
  background-color: ($--orangeLight);
}

.bg-yellow.light {
  color: ($--yellow);
  background-color: ($--yellowLight);
}

.bg-olive.light {
  color: ($--olive);
  background-color: ($--oliveLight);
}

.bg-green.light {
  color: ($--green);
  background-color: ($--greenLight);
}

.bg-cyan.light {
  color: ($--cyan);
  background-color: ($--cyanLight);
}

.bg-blue.light {
  color: ($--blue);
  background-color: ($--blueLight);
}

.bg-purple.light {
  color: ($--purple);
  background-color: ($--purpleLight);
}

.bg-mauve.light {
  color: ($--mauve);
  background-color: ($--mauveLight);
}

.bg-pink.light {
  color: ($--pink);
  background-color: ($--pinkLight);
}

.bg-brown.light {
  color: ($--brown);
  background-color: ($--brownLight);
}

.bg-grey.light {
  color: ($--grey);
  background-color: ($--greyLight);
}

.bg-gradual-red {
  background-image: ($--gradualRed);
  color: ($--white);
}

.bg-gradual-orange {
  background-image: ($--gradualOrange);
  color: ($--white);
}

.bg-gradual-green {
  background-image: ($--gradualGreen);
  color: ($--white);
}

.bg-gradual-purple {
  background-image: ($--gradualPurple);
  color: ($--white);
}

.bg-gradual-pink {
  background-image: ($--gradualPink);
  color: ($--white);
}

.bg-gradual-blue {
  background-image: ($--gradualBlue);
  color: ($--white);
}
