@import './mixins/index.less';
@import './themes/index.less';

// Alignment
.textAlign(@type) {
  .@{wux-prefix}-text--@{type} {
    text-align: @type !important;
  }
}

.textAlign(left);
.textAlign(right);
.textAlign(center);
.textAlign(justify);
.textAlign(nowrap);

// Transformation
.textTransform(@type) {
  .@{wux-prefix}-text--@{type} {
    text-transform: @type !important;
  }
}

.textTransform(lowercase);
.textTransform(uppercase);
.textTransform(capitalize);

// Colors
.color(@type, @color) {
  .@{wux-prefix}-@{type} {
    color: @color !important;

    &--bg {
      background-color: @color !important;
    }

    &--border {
      border-color: @color !important;
    }
  }
}

.color(light, @light);
.color(stable, @stable);
.color(primary, @primary);
.color(info, @info);
.color(success, @success);
.color(warning, @warning);
.color(error, @error);
.color(royal, @royal);
.color(dark, @dark);

// Margin and padding
.spacing(@count)when(@count >= 0) {
  @margin: @count * 2rpx;

  .@{wux-prefix}-m--@{count},
  .@{wux-prefix}-margin--@{count} {
    margin: @margin !important;
  }

  .@{wux-prefix}-mt--@{count},
  .@{wux-prefix}-margin-top--@{count} {
    margin-top: @margin !important;
  }

  .@{wux-prefix}-mr--@{count},
  .@{wux-prefix}-margin-right--@{count} {
    margin-right: @margin !important;
  }

  .@{wux-prefix}-mb--@{count},
  .@{wux-prefix}-margin-bottom--@{count} {
    margin-bottom: @margin !important;
  }

  .@{wux-prefix}-ml--@{count},
  .@{wux-prefix}-margin-left--@{count} {
    margin-left: @margin !important;
  }

  .@{wux-prefix}-mv--@{count},
  .@{wux-prefix}-margin-vertical--@{count} {
    margin: @margin 0 !important;
  }

  .@{wux-prefix}-mh--@{count},
  .@{wux-prefix}-margin-horizontal--@{count} {
    margin: 0 @margin !important;
  }

  .@{wux-prefix}-p--@{count},
  .@{wux-prefix}-padding--@{count} {
    padding: @margin !important;
  }

  .@{wux-prefix}-pt--@{count},
  .@{wux-prefix}-padding-top--@{count} {
    padding-top: @margin !important;
  }

  .@{wux-prefix}-pr--@{count},
  .@{wux-prefix}-padding-right--@{count} {
    padding-right: @margin !important;
  }

  .@{wux-prefix}-pb--@{count},
  .@{wux-prefix}-padding-bottom--@{count} {
    padding-bottom: @margin !important;
  }

  .@{wux-prefix}-pl--@{count},
  .@{wux-prefix}-padding-left--@{count} {
    padding-left: @margin !important;
  }

  .@{wux-prefix}-pv--@{count},
  .@{wux-prefix}-padding-vertical--@{count} {
    padding: @margin 0 !important;
  }

  .@{wux-prefix}-ph--@{count},
  .@{wux-prefix}-padding-horizontal--@{count} {
    padding: 0 @margin !important;
  }

  .spacing((@count - 5));
}

.spacing(30);

// Floats
.@{wux-prefix}-clearfix {
  .clearfix();
}

.@{wux-prefix}-pull-right {
  float: right !important;
}

.@{wux-prefix}-pull-left {
  float: left !important;
}

// Ellipsis
.@{wux-prefix}-ellipsis {
  .ellipsis();

  &--l2 {
    .ellipsisLn(2);
  }

  &--l3 {
    .ellipsisLn(3);
  }
}

// Hairline
.@{wux-prefix}-hairline {
  &,
  &--top,
  &--right,
  &--bottom,
  &--left,
  &--horizontal,
  &--vertical,
  &--surrounded {
    position: relative;

    &::after {
      .hairline();
    }
  }

  &--top::after {
    border-top-width: 1px;
  }

  &--right::after {
    border-right-width: 1px;
  }

  &--bottom::after {
    border-bottom-width: 1px;
  }

  &--left::after {
    border-left-width: 1px;
  }

  &--horizontal::after {
    border-width: 1px 0;
  }

  &--vertical::after {
    border-width: 0 1px;
  }

  &--surrounded::after {
    border-width: 1px;
  }
}