@import "mixins/mixins";
@import "common/var";

@include b(layout) {
	display: flex;
	flex-direction: column;
	flex: auto;
	background: $--layout-body-background;
	@include e((header, footer)) {
		flex: 0 0 auto;
	}
	@include e(header) {
		background: $--layout-header-background;
		padding: $--layout-header-padding;
		height: $--layout-header-height;
		line-height: $--layout-header-height;
	}
	@include e(footer) {
		background: $--layout-footer-background;
		padding: $--layout-footer-padding;
		color: #000;
		font-size: 12px;
	}
	@include e(sider) {
		transition: all .2s ease-in-out;
		position: relative;
		background: $--layout-sider-background;
		min-width: 0;
		@include m(children) {
			height: 100%;
			padding-top: 0.1px;
			margin-top: -0.1px;
		}
		@include m(trigger) {
			position: fixed;
			bottom: 0;
			text-align: center;
			cursor: pointer;
			height: $--layout-trigger-height;
			line-height: $--layout-trigger-height;
			color: $--layout-trigger-color;
			background: $--layout-sider-background;
			z-index: 1000;
			transition: all .2s ease-in-out;
			.kc-icon {
				font-size: 16px;
			}
			> * {
				transition: all .2s;
			}
			&-collapsed {
				.kc-layout__sider--trigger-icon {
					transform: rotateZ(180deg);
				}
			}
		}
		@include m(zero-width) {
			> * {
				overflow: hidden;
			}
			&-trigger {
				position: absolute;
				top: $--layout-header-height;
				right: -$--layout-zero-trigger-width;
				text-align: center;
				width: $--layout-zero-trigger-width;
				height: $--layout-zero-trigger-height;
				line-height: $--layout-zero-trigger-height;
				background: $--layout-sider-background;
				color: #fff;
				font-size: $--layout-zero-trigger-width / 2;
				border-radius: 0 $--border-radius-base $--border-radius-base 0;
				cursor: pointer;
				transition: background .3s ease;
				&:hover {
					background: tint($--layout-sider-background, 10%);
				}
				&-left {
					right: 0;
					left: -$--layout-zero-trigger-width;
					border-radius: $--border-radius-base 0 0 $--border-radius-base;
				}
			}
		}
	}
	@include e(content) {
		flex: auto;
		background: #0f8de9;
		min-height: 120px;
		line-height: 120px;
	}
	@include e(has-sider) {
		flex-direction: row;
		.kc-layout__content {
			overflow-x: hidden;
		}
	}
}