.header {
	@include flex;
	padding-top: 20px;
	padding-bottom: 20px;

	&__logo {
		font-weight: 500;
		font-size: 1.3em;
		width: 20%;
	}

	&__menu {
		.header__active {
			font-weight: 500;
		}

		ul {
			@include flex;

			li {
				margin-right: 10px;

				&:last-child {
					margin-right: 0;
				}

				a {
					display: inline-block;
					padding: 8px 16px;
					transition: .3s ease background-color;
					border-radius: 32px;

					&:hover,
					&:focus {
						background-color: var(--light-color);
					}
				}
			}
		}
	}

	&__account {
		position: relative;
		line-height: 0;
		width: 20%;
		text-align: right;
		@include flex;
		justify-content: flex-end;

		&__menu {
			position: absolute;
			top: 50px;
			right: 0;
			z-index: 999;
			width: 150px;
			background-color: var(--background-color);
			border-radius: 15px;
			border: 1px solid var(--light-color);
			overflow: hidden;
			text-align: left;
			box-shadow: var(--box-shadow);

			a {
				display: block;
				padding: 8px 16px;
				line-height: 1.3;
				transition: .3s ease background-color;
				font-size: .9em;

				&:hover,
				&:focus {
					background-color: var(--light-color);
				}
			}
		}

		&__button {
			line-height: 0;
			margin-left: 10px;
			padding: 8px 8px;
			border-radius: 50%;
			transition: .3s ease background-color;

			.iconify  {
				font-size: 1.7em;
				color: var(--icon-color);
				line-height: 0;
			}

			&:hover,
			&:focus {
				background-color: var(--light-color);
			}
		}
	}
}