/**
 * loading.less
 * 加载动画的默认样式
 */

// 导入必要的文件
@import "../../common/import.less";

/**
 * 加载动画
 */
// 加载动画公用样式
.loading-oneway, .loading-twoway {
	display: inline-block;
	position: relative;
	// 默认的宽高
	width: 2em;
	height: 2em;
	vertical-align: middle;

	&::before, &::after {
		content: '\20';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
// 单项加载动画
.loading-oneway {
	&::before {
		border: (@BaseSize / 3) solid @ColorBlack;
		border-radius: 50%;
		opacity: .1;
	}
	&::after {
		border: (@BaseSize / 3) solid transparent;
		border-top-color: @ColorBlack; 
		border-radius: 50%;
		opacity: .5;
		.animation(fx-rotate 1s linear infinite);
	}
}
// 双向加载动画
.loading-twoway {
	&::before, &::after {
		border: (@BaseSize / 3) solid transparent;
		border-top-color: @ColorBlack; 
		border-radius: 50%;
		opacity: .5;
	}

	&::before {
		.animation(fx-rotate 1.75s linear infinite);
	}

	&::after {
		.animation(fx-rotate-reverse 1s linear infinite);
	}
}

/**
 * 加载动画颜色，加载动画组合颜色
 */
// 蓝色样式
.c-blue, .c-blue > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorBlueDeepest;
	}
}
// 绿色样式
.c-green, .c-green > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorGreenDeepest;
	}
}
// 橙色样式
.c-orange, .c-orange > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorOrangeDeepest;
	}
}
// 红色样式
.c-red, .c-red > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorRedDeepest;
	}
}
// 黄色样式
.c-yellow, .c-yellow > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorYellowDeepest;
	}
}
// 天蓝色样式
.c-teal, .c-teal > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorTealDeepest;
	}
}
// 紫蓝色样式
.c-violet, .c-violet > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorVioletDeepest;
	}
}
// 紫色样式
.c-purple, .c-purple > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorPurpleDeepest;
	}
}
// 粉色样式
.c-pink, .c-pink > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorPinkDeepest;
	}
}
// 棕色样式
.c-brown, .c-brown > * {
	&.loading-oneway::after, &.loading-twoway::before, &.loading-twoway::after {
		border-top-color: @ColorBrownDeepest;
	}
}

/**
 * 加载动画组合样式
 */
// 加载动画按钮样式
.btn > .loading-oneway, .btn > .loading-twoway {
	margin: (-@CtrlPaddingTB / 2) 0 0 0;
	&, &::before, &::after {
		width: 2em;
		height: 2em;
	}
}
// 实心按钮的颜色设置
.btn.btn-solid {
	&.c-blue, &.c-green, &.c-yellow, &.c-orange, &.c-red, &.c-teal, &.c-pink, &.c-purple, &.c-violet, &.c-brown, &.c-dark, &.c-grey {
		> .loading-oneway::after, > .loading-twoway::before, > .loading-twoway::after {
			border-top-color: #fff;
			opacity: .7;
		}
	}
}