@use '../base/_variable';
/*非常重要的样式让背景图片100%适应整个屏幕*/

header{
	.icon-arrow{
		transition: .2s all ease-in;
		width: 16px;
		height: 16px;
		background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAADMzMzNzc3MzMzMzMzMzMzMzMzMzMzNzc3Nzc3Nzc3MzMzZ2dnMzMzNzc3IyMjMzMzMzMzNzc3Ly8vMzMzNzc3MzMzNzc3Nzc3MzMzKysrOzs7MzMzMzMzMzMzMzMzMzMzMzMzLy8vMzMzMzMzDCjeDAAAAJHRSTlMA+kP18Nt35aRoUwwGiScc0sKxlIJvWk48NzUV5t/Ps5yNYl8rrKDyAAAAwklEQVQ4y92R2RKCMAxFU7qDguwI7ub/v1GamU5By/is54XkHtrOJPAb7L5Ixc7jlh40syAQxRD3CUfUcEVEnsR8z2ZlIJMbf6TOHzKAXMwF69995/ypoKdcybq1tzjDj0A8XMOeS9+iI/XtnlobvKJAhaCioPVtQ62BQHbxR8KF5WrEhaawcXVNpZxgxcgp3gPcqBD5x1yQqA19WGRyChdYiGCCv8d3X3pfQZxJkqYNxaG9oS5gk4SFDcVJpUzgD3kB1aoYrYug5P4AAAAASUVORK5CYII=');
	}
	.header{
		&-height{
			height: 50px;
		}
		&-main{
			width: 100%;
			height: 30px;
			background:#1E2023;
			box-sizing: content-box;
      z-index: 101;
		}
		&-logo{
			width: 146px;
			height: 30px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% auto;
			a{
				display: block;
				height: 100%;
				text-indent: -999em;
			}
		}
		&-game{
			&:hover{
				.icon-arrow{
					transform: rotate(180deg);
				}
				.header-game-more{
					display: block;
					&:hover{
						display: block;
					}
				}
			}
			span{
				cursor: pointer;
				display: block;
				height: 30px;
				line-height: 30px;
				em{
					margin:  0 5px;
				}
			}
			
			img{
				width: 20px;
				height: 20px;
			}
			&-more{
				display: none;
				margin-bottom: 14px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-color: #26282B;
				top: 40px;
				ul{
					li{
						padding-left: 28px;
						padding-right: 20px;
						width: 70px;
						box-sizing: content-box;
						text-align: center;
						line-height: 1.5;
						img{
							width: 48px;
							height: 48px;
						}
						em{
							// margin-top: 5px;
							// display: block;
							// color: #ccc;
						}
					}
				}
			}
		}
		&-language{
			vertical-align: middle;
			&:hover{
				.icon-arrow{
					transform: rotate(180deg);
				}
				.header-language-more{
					display: block;
					&:hover{
						display: block;
					}
				}
			}
			span{
				cursor: pointer;
				display: block;
				height: 30px;
				line-height: 30px;
				em{
					margin:  0 5px;
					font-size: 16px;
				}
			}
			img{
				width: 18px;
				height: 18px;
			}
			.header-language-more{
				display: none;
				width: 110px;
				margin-bottom: 14px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-color: #26282B;
				top: 35px;
				em{
					margin-left: 5px;
				}
				ul{
					li{
						padding-top: 5px;
						padding-bottom: 5px;
					}
				}
			}
		}
		&-login{
			&-no{
				display: flex;
				a {
					width: 59px;
					height: 28px;
					border-radius: 14px 0px 0px 14px;
					background: #fff;
					color: $defaultColor;
					line-height: 28px;
					&:nth-of-type(2) {
						border-radius: 0px 14px 14px 0px;
						background: $defaultColor;
						color: #fff;;
				}
				}
			}
			&-user{
				&:hover{
					ul{
						display: block;
					}
				}
				span{
					cursor: pointer;
					display: block;
					max-width: 160px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					height: 30px;
					line-height: 30px;
					em{
						margin:  0 5px;
						color: $defaultColor;
					}
				}
				ul{
					display: none;
					width: 80px;
					border-bottom-left-radius: 20px;
					border-bottom-right-radius: 20px;
					background-color: #26282B;
					// text-align: center;
					// li{
					// 	text-indent: 1em;
					// }
				}
			}
		}

	}
	
}
