// 通用样式（原子性样式）
// 消除浮动影响
.clearfix {
	&::before {
		display: table;
		content: '';
	}

	&::after {
		display: table;
		clear: both;
		content: '';
	}
}

// 文本内容超出当前容器出...
.textellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// 进度条样式
.loading-bar {
	height: 1px;
	width: 100%;
	position: fixed;
	z-index: 1;
}
.hover-active {
	&:hover {
		color: mix(mix(#fff, @text-color, 5%), #fff, 80%);
		background-color: mix(mix(@primary-color, #fff, 20%), #fff, 50%);
	}

	&.is-active {
		color: mix(#fff, @text-color, 5%);
		background-color: mix(@primary-color, #fff, 20%);
	}
}

.editor-border-active {
	border-color: @primary-color;
	box-shadow: 0 0 0 2px mix(white, @primary-color, 85%);
}
//  按钮（行为级别 = 不常用）
.action-level-50 {
	color: @primary-color;
	background-color: @app_yellow;
	border-color: @app_yellow;

	&:hover {
		background-color: fade(@app_yellow, 80%);
		border-color: fade(@app_yellow, 80%);
	}

	&:disabled,
	&:disabled:hover {
		color: fade(@primary-color, 40%);
	}
}

//  按钮（默认，行为级别 = 一般操作）
.action-level-100 {
	color: @primary-color;
	background-color: @app_white;
	border-color: @primary-color;

	&:hover,
	&:focus {
		color: #000;
		background-color: @app_white;
		border-color: #000;
	}

	&:disabled,
	&:disabled:hover {
		color: fade(@primary-color, 40%);
		background: fade(@app_white, 40%);
		border-color: fade(@primary-color, 40%);
	}
}
//  按钮（行为级别 = 常用操作）
.action-level-200 {
	background: mix(@primary-color, #fff, 20%);
	color: @primary-color;
	border-color: mix(@primary-color, #fff, 40%);

	&:hover {
		background: @primary-color;
		color: #fff;
		border-color: @primary-color;
	}

	&:disabled,
	&:disabled:hover {
		background: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
		color: mix(@primary-color, #fff, 50%);
		border-color: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
	}
}

//  按钮（行为级别 = 关键操作）
.action-level-250 {
	color: @app_white;
	background-color: @primary-color;
	border-color: @primary-color;
	&:hover,
	&:focus {
		color: @app_white;
		background-color: lighten(@primary-color, 15%);
		border-color: fade(@primary-color, 80%);
	}

	&:disabled,
	&:disabled:hover {
		color: @app_white;
		background-color: lighten(@primary-color, 15%);
		border-color: fade(@primary-color, 80%);
	}
}

#application-body {
	//  外边距
	@spacing-outer: outernone, outersmall, outermedium, outerlarge;

	//  内边距
	@spacing-inner: innernone, innersmall, innermedium, innerlarge;

	@spacing-px: 0px, 8px, 16px, 24px;

	//  间隔模式
	.spacing {
		&-top {
			each(@spacing-outer, {
      &--@{value} {
        margin-top: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-top: extract(@spacing-px, @index);
      }
    });
		}
		&-right {
			each(@spacing-outer, {
      &--@{value} {
        margin-right: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-right: extract(@spacing-px, @index);
      }
    });
		}
		&-bottom {
			each(@spacing-outer, {
      &--@{value} {
        margin-bottom: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-bottom: extract(@spacing-px, @index);
      }
    });
		}
		&-left {
			each(@spacing-outer, {
      &--@{value} {
        margin-left: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-left: extract(@spacing-px, @index);
      }
    });
		}
	}

	//  自身对齐方式
	.self {
        //  垂直对齐
        &-valign {
            &--middle {
                margin: auto 0px;
            }
            &--bottom {
                margin-top: auto;
            }
        }
        //  水平对齐
        &-halign {
            &--left {
                align-self: flex-start;
            }
            &--center {
                align-self: center;
            }
            &--right {
                align-self: flex-end;
            }
        }
	}

	// flex 布局样式
	.flex-element {
		display: flex;

		@flex-dir: row, row-reverse, column, column-reverse;
		@flex-align: flex-start, center, flex-end, space-between;
		@flex-valign: flex-start, center, flex-end;

		// flex 方向
		each(@flex-dir, {
      &.flex-dir--@{value} {
        flex-direction: @value;
      }
    });

		// flex 水平对齐
		each(@flex-align, {
      &.flex-align--@{value} {
        justify-content: @value;
      }
    });

		// flex 垂直对齐
		each(@flex-valign, {
      &.flex-valign--@{value} {
        align-items: @value;
      }
    });
	}

	@text-halign: left, center, right, justify;

	@text-valign: top, middle, bottom;

	//  文本水平对齐
	each(@text-halign, {
  .text-halign--@{value} {
    text-align: @value;
  }
});

	//  文本水平对齐
	each(@text-valign, {
  .text-valign--@{value} {
    vertical-align: @value;
  }
})

// 边框
.border {
		// 实线边框
		&--double {
			border-style: double;
		}

		// 点状边框
		&--dotted {
			border-style: dotted;
		}

		// 虚线边框
		&--dashed {
			border-style: dashed;
		}

		// 双线边框
		&--double {
			border-style: double;
		}
	}

	.wrap {
		&--warp {
			white-space: pre-wrap;
		}
		&--nowarp {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	// 文本绘制模式
	.render-mode {
		&--heading1 {
            display: block;
            font-size: 2em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading2 {
			display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading3 {
			display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
        &--heading4 {
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }
		&--heading5 {
            display: block;
            font-size: 0.83em;
            margin-block-start: 1.67em;
            margin-block-end: 1.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading6 {
            display: block;
            font-size: 0.67em;
            margin-block-start: 2.33em;
            margin-block-end: 2.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--text {
			display: inline;
		}
		&--paragraph {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
		}
	}
}