@import "global.less";

@panelHeaderHeight: 2.8rem;
@panelHeaderBkgColor: #f3f3f4;

@panelHeaderIconColor: #5a5a5b;
@panelToolsIconColor: #aeaeae;
@panelHeaderFontColor: #5a5a5b;
@panelBorderColor: darken(@panelHeaderBkgColor, 10%);
@panelPadding: 0.4em;
@panelBoxShadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 -2px 10px 0 rgba(34, 36, 38, 0.08);
.ui.panel {
	display: block;
	&:last-child {
		margin-bottom: 0;
	}
	> .content {
		padding: @panelPadding;
	}
	> .header {
		> .content {
			padding: 0 1rem;
			height: @panelHeaderHeight;
			background-color: @panelHeaderBkgColor;
			color: @panelHeaderFontColor;
			> i.panel-icon {
				color: @panelHeaderIconColor;
				line-height: @panelHeaderHeight;
				height: @panelHeaderHeight;
				float: left;
			}
			> .caption {
				line-height: @panelHeaderHeight;
			}
			> .tools {
				float: right;
				height: @panelHeaderHeight;
				> *:not(i) {
					float: left;
					line-height: @panelHeaderHeight;
					display: inline-block;

				}
				> i {
					height: inherit;
					position: relative;
					display: inline-block;
					&:before {
						position: absolute;
					}
					color: @panelToolsIconColor;
					cursor: pointer;
					line-height: @panelHeaderHeight;
				}
				.collapse-btn:before {
					.transition(transform 0.2s ease-out);
				}
			}
		}
	}
	//.transition(height 0.2s ease-out);
	overflow: hidden;
	&.collapsed {
		height: @panelHeaderHeight;
		> .header {
			> .content .collapse-btn:before {
				.transform(rotate(-90deg));
			}
		}
	}
	&.fieldset, &.groupbox {
		&.basic {
			border-color: transparent;
		}

		position: relative;
		&:before {
			width: 100%;
			content: "";
			position: absolute;
			border-radius: 2px;
			top: @panelHeaderHeight/2;
			z-index: -1;
			margin-left: -@panelPadding;
		}
		> .header {
			> .content {
				position: relative;
				display: inline-block;
				background-color: transparent;
				margin-left: 3em;
				border-radius: 4px;
				&:before {
					border: 1px solid @panelBorderColor;
					left: 0;
					right: 0;
					background-color: #fff;
					top: 2px;
					border-radius: 2px;
					bottom: 2px;
					content: "";
					z-index: -1;
					position: absolute;
				}
				> .tools {
					height: @panelHeaderHeight;
				}
			}
		}
	}
	&.fieldset {
		&:before {
			border-top: 1px solid @panelBorderColor;
		}
	}
	&.groupbox {
		&:before {
			border: 1px solid @panelBorderColor;
			bottom: 0;
		}
	}
	&.crowded > .content {
		padding: 0;
	}
	&.basic {
		box-shadow: inset 0px 0px 0px 1px #e7eaec;
		> .header {
			> .content {
				&:before {
					border: none;
				}
				background-color: transparent;
			}
			box-shadow: inset 0px 0px 0px 1px #e7eaec;
		}
	}
	.mixin_panel_color(@name,@color) {
		&.@{name} {
			> .header {
				border-left: 2.5px solid @color;
			}
		}
	}
	//.mixin_panel_color(red, @red);
	//.mixin_panel_color(orange, @orange);
	//.mixin_panel_color(yellow, @yellow);
	//.mixin_panel_color(olive, @olive);
	//.mixin_panel_color(green, @green);
	//.mixin_panel_color(teal, @teal);
	//.mixin_panel_color(blue, @blue);
	//.mixin_panel_color(violet, @violet);
	//.mixin_panel_color(purple, @purple);
	//.mixin_panel_color(pink, @pink);
	//.mixin_panel_color(brown, @brown);
	//.mixin_panel_color(grey, @grey);

	&.v-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		padding: 0;
		.header {
			margin: 0px;
		}
		> .flex-box {
			> div {
				padding: 0.6em;
			}
		}
	}
}

