/**=====================
     07. Color CSS Start
==========================**/
.color-box{
  margin-bottom: -10px;
  button {
    margin-bottom: 10px;
    + button {
      margin-left: 5px;
    }
  }
}

// primary Color
$m-val:13;
$or: $primary-color;
@while $m-val >=1 {
  .primary-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 1.5%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//primary Color

// secondary Color
$m-val:13;
$or: $secondary-color;
@while $m-val >=1 {
  .secondary-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 3%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//secondary Color

//Success Color
$m-val:13;
$or:$success-color;
@while $m-val >=1 {
  .success-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, .9%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//Success Color

// Info Color
$m-val:13;
$or: $light-font;
@while $m-val >=1 {
  .info-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 2.5%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//Info Color

// warning Color
$m-val:13;
$or:  $warning-color;
@while $m-val >=1 {
  .yellow-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 3%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//warning Color

//Danger Color
$m-val:13;
$or:$danger-color;
@while $m-val >=1 {
  .red-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 2%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//Danger Color

//Pink Color
$m-val:13;
$or:#e6155e;
@while $m-val >=1 {
  .pink-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 3%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//Pink Color


// Gray Color
$m-val:13;
$or: $dark-gray;
@while $m-val >=1 {
  .gray-color ul li {
    &:nth-child(#{$m-val}) {
      $or: lighten($or, 3%);
      background-color: $or;
      padding: 10px 15px;
      margin-bottom: 10px;
      span:before {
        content: "#{$or}";
        display: block;
        color: $white;
        text-align: center;
      }
      $m-val: $m-val - 1;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
//gray Color


.light-font {
  color: $theme-body-sub-title-color;
}

/**=====================
     07. Color CSS Ends
==========================**/