@import (reference) 'dingtalk-theme/dingtalk-x/mob.less';
@import (reference) '../../styles/public.less';

.tabBarPage {
	&-tabBar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: @tabBarHeight;
		background-color: @common_bg_z1_color;
		z-index: 99;

		&-height {
			height: @tabBarHeight;
		}

		&-item {
			font-size: 12px;
			line-height: 12px;
			flex: 1;
			text-align: center;

			&-icon {
				font-size: 18px;
				margin-bottom: 4px;
			}
		}

		&-itemActive {
			color: @theme_primary1_color;
		}

		&-more {
			background-color: @theme_primary1_color;
			width: 55px;
			height: 34px;
			border-radius: 10px;
			color: @common_bg_z1_color;
			font-size: 24px;
			text-align: center;
			line-height: 34px;
			margin: auto;
		}
	}

	&-function {
		position: fixed;
		bottom: 64px;
		z-index: 999;
		transition: transform 0.6s;
		transform: translate3d(0, 1000px, 0);
		left: 50%;
		margin-left: -100px;

		&-close {
			position: fixed;
			z-index: 999;
			bottom: 7px;
			width: 54px;
			height: 34px;
			left: 50%;
			margin-left: -27px;
			text-align: center;
			background-color: @common_bg_z1_color;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-img {
			width: 50px;
			height: 50px;
			margin-right: 8px;
		}

		&-item {
			display: flex;
			align-items: center;
			color: @common_bg_z1_color;
			margin-bottom: 32px;
		}

		&-title {
			line-height: 14px;
		}

		&-text {
			font-size: 12px;
			line-height: 12px;
			color: #c0b2b2;
			padding-top: 8px;
		}
	}
}