.ct-header-account {
	a {
		display: flex;
		align-items: center;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
	}

	.ct-image-container {
		width: var(--avatarSize);
		height: var(--avatarSize);
		border-radius: 100%;
		overflow: hidden;
		-webkit-mask-image: -webkit-radial-gradient(white, black);
	}

	svg {
		fill: currentColor;
		width: var(--iconSize);
    	height: var(--iconSize);
	}

	svg,
	.ct-image-container {
		&:not([hidden]) + .ct-label {
			margin-left: 8px;
		}
	}
}


// account modal
#account-modal {
	--overflow: visible;
}

.ct-account-form {
	@include media-breakpoint-down (xs) {
		max-width: 88vw;
	}

	@include media-breakpoint-up (sm) {
		max-width: 480px;
	}

	margin-left: auto;
	margin-right: auto;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.2);
	--contentSpacing: 1em;
	--formBorderInitialColor: rgba(18, 21, 25, 0.15);
}


// account content
.ct-account-form {
	> ul {
		--listIndent: 0;
		--listItemSpacing: 0;
		--listStyleType: none;
		display: flex;
		margin-bottom: 0;
		border-bottom: 1px solid rgba(18, 21, 25, 0.1);

		li {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 60px;
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.03em;
			cursor: pointer;
			transition: opacity 0.1s ease,
						background 0.1s ease;

			&.active {
				&:after {
					position: absolute;
					content: '';
					width: 100%;
					height: 3px;
					left: 0;
					bottom: -1px;
					background: #fff;
				}
			}

			&:not(.active) {
				opacity: 0.5;
				background: rgba(0, 0, 0, 0.04);

				&:hover {
					opacity: 0.8;
				}
			}

			&:first-child {
				border-right: 1px solid rgba(18, 21, 25, 0.1);
			}
		}
	}

	section {
		@include media-breakpoint-down (xs) {
			padding: 40px 30px;
		}

		@include media-breakpoint-up (sm) {
			padding: 70px 80px;
		}

		&:not(.active) {
			display: none;
		}
	}

	form > * {
		--contentSpacing: 20px;

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

	label {
		display: block;
		--fontSize: 14px;
	}

	.ct-button {
		width: 100%;
	}

	.col-2 {
		display: flex;
		justify-content: space-between;
	}

	#reg_passmail,
	.ct-back-to-login {
		font-size: 14px;
		text-align: center;
	}

	.ct-back-to-login {
		display: block;
		margin-top: 20px;
	}

	.login-remember {
		font-size: 14px;

		label {
			margin: 0;
		}

		input {
			--top: 3px;
		}
	}

	#reg_passmail {
		opacity: 0.7;
	}
}