@import "./base/fn.wxss";

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

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

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

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

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

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

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

.color(light, @light);
.color(stable, @stable);
.color(positive, @positive);
.color(calm, @calm);
.color(balanced, @balanced);
.color(energized, @energized);
.color(assertive, @assertive);
.color(royal, @royal);
.color(dark, @dark);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.spacing(30);

// Floats
.@{wuxClassNamePrefix}-clearfix {
	.clearfix();
}

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

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

// Ellipsis
.@{wuxClassNamePrefix}-ellipsis {
	.ellipsis();

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

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

// Hairline
.@{wuxClassNamePrefix}-hairline {
    &,
    &--top,
    &--right,
    &--buttom,
    &--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;
    }
}