.generate-color(@color){
  @var-color: ~'@{color}-color';
  .@{var-color}{
    color: @@var-color !important;
  }
  .bg-@{var-color}{
    background-color: @@var-color !important;
  }
}

.generate-color(red);
.generate-color(blue);
.generate-color(green);
.generate-color(yellow);
.generate-color(white);
.generate-color(gray);
.generate-color(gray1);
.generate-color(gray2);
.generate-color(gray3);
.generate-color(gray4);
.generate-color(dark);
.generate-color(dark1);
.generate-color(dark2);
.generate-color(light-primary);
.generate-color(primary);
.generate-color(dark-primary);

.clearfix{
  .clearfix();
};

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column
}

.flex1 {
  flex: 1;
}

.list >li, .list >div {
  padding: 3px;
  color: @primary-color;
  position: relative;
  cursor: pointer;
  &:hover {
    color: lighten(@primary-color, 10%);
  }
  &.selected {
    color: @primary-color;
  }
}

.list-bg>li, .list-bg >div {
  border-bottom: 1px solid @border-color;
  &:hover {
    background-color: lighten(@gray3-color, 2%);
  }
  &.selected {
    background-color: @gray3-color;
  }
}

.middle {
  position: absolute;
  top: 50%;
  transform: translate(0%, -51%);
}

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

.overflow-y {
  overflow-y: auto;
}

.float-right {
  float: right;
}

.text-hover{
  .text-hover();
}

.link-hover{
  .link-hover();
}

.generate-text-align(@dir){
  .text-@{dir} {
    text-align: @dir !important;
  }
}

.generate-text-align(left);
.generate-text-align(center);
.generate-text-align(right);

.bottom-line {
  border-bottom: 1px solid @border-color;
}