@import "variables";
@import "tm_mixins";

.popup-type-login {
	.cherry-popup-login {
		input[type="text"],
		input[type="password"] {
			width: 100%;
		}

		label {
			margin-bottom: 0.5em;
			display: inline-block;
		}

		&__form {

		}

		&__input-group{
			display: flex;
			flex-flow: column nowrap;
			align-items: stretch;
		}

		&__wrap {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			margin: 0.75em 0;

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

		&__login-in {
			color: white;
			cursor: pointer;
			background-color: $blue_color;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 40px;
			font-weight: 600;

			&:hover {
				background-color: $blue_color_h;
			}
		}

		&__remember {
			display: flex;
			align-items: center;
		}

		&__message {
			margin: 1em 0;
			text-align: center;
			display: none;

			span {
				font-size: 18px;
				color: $red_color;
			}

			&.success-type{
				span{
					color: $green_color;
				}
			}
		}

		&__already-message {
			display: flex;
			justify-content: center;
		}

		.cherry-popup-login__signup-message {
			display: flex;
			justify-content: center;

			span {
				margin-right: 5px;
			}
		}

		.cherry-popup-login__use-mail {
			display: flex;
			align-items: center;
			margin: 20px 0;

			span {
				text-align: center;
				flex: 1 1 auto;
				margin: 0 25px;
			}

			&:before {
				flex: 1 1 auto;
				display:block;
				position: relative;
				height: 1px;
				background-color: $grey_color_3;
				content:'';
			}

			&:after {
				flex: 1 1 auto;
				display:block;
				position: relative;
				height: 1px;
				background-color: $grey_color_3;
				content:'';
			}
		}
	}
}