@import (reference) "global";

.clearfix() {
	&:before, &:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

template {
	display: none;
}

*:focus {
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	//-webkit-user-modify: read-write-plaintext-only;
}

.mobile {
	overflow: auto;
	-webkit-overflow-scrolling: touch;

	::-webkit-scrollbar {
		-webkit-appearance: none;
		&:vertical {
			width: 2px;
		}
		&:horizontal {
			height: 2px;
		}
		&-thumb {
			background: #888;
		}
	}
}

.show-on-ready {
	visibility: hidden;
}

.hide-on-ready {
	visibility: hidden;
}

.display-none {
	display: none !important;
}

.item-transition {
	transition-duration: 0.3s;
	transition-property: all;
}

.item-out {
	.transform(scale(0));
	.opacity(0);
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.colored(@name,@color,@colorName,@style) {
	.@{colorName}-@{name} {
			@{style}: @color
	}
}

.ui.fragment {
	position: relative;
	padding: 1em;
	background-color: #fff;
	box-shadow: @floatingShadow;
	margin-bottom: 0.6em;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	&:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
	}
	.mixin_fragment(@name,@color) {
		&.@{name} {
			&:before {
				background-color: fadeout(@color, 20%);
			}
		}
	}

	&.basic {
		background-color: transparent;
	}
	&.crowd {
		padding: 0em;
	}

}

.ui.city-selector {
	width: 320px;
	height: 280px;
	display: inline-block;
	overflow: hidden;
	border: 1px solid @primaryColor;
	.content {
		.province, .cities, .hot {
			display: none;
			.name {
				width: 25%;
				cursor: pointer;
				display: inline-block;
				&:hover {
					color: @primaryColor;
				}
			}
			&.active {
				display: block;
			}
		}
		.city.active {
			display: block;
		}
	}
	.tab-buttons {
		width: 100%;
		display: table;
		> .item {
			display: table-cell;
			text-align: center;
			width: 33.33%;
			cursor: pointer;
			&.active, &:active {
				background-color: @primaryColor;
				color: #fff;
			}
			&:hover {
				background-color: fadeout(@primaryColor, 20%);
				color: #fff;
			}
		}
	}
}

c-segment {
	display: block;
}

c-divider {
	display: block;
}

c-form {
	display: block;
}

messages, message {
	display: block;
}