@use '../../utils' as *;

/*----------------------------------------*/
/*  4.25 login
/*----------------------------------------*/

.rs-login {
	&-wrapper{
		background-color: var(--rs-white);
		box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.12);
		padding: 30px 30px;
		margin: 0 auto;
		border-radius: 8px 0 0px 8px;
		@media #{$mobile}{
			padding: 25px 25px;
		}
		input[type="checkbox"]
		~ label{
			color: var(--rs-black);
			&::after{
				border: 1px solid rgba(102, 102, 102, 0.278);
				z-index: 1;
			}
			&::before{
				color: var(--rs-white);
				z-index: 2;
				background: var(--rs-theme-blue);
			}

		}
	.form-input-title label {
			margin-bottom: 5px;
			text-transform: capitalize;
			font-size: 16px;
			text-align: left;
			display: block;
			font-weight: 500;
			color: var(--rs-black);
		}
	}
	&-thumb{
		height: 100%;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 0 6px 6px 0px;
			@media #{$md}{
				border-radius: 0 0px 6px 6px;
			}
		}
	}
	&-link{
		color: var(--rs-theme-blue);
		&:hover{
			color: var(--rs-theme-yellow);
		}
	}
	&-btn{
		.rs-btn{
			height: 50px;
		}
	}
	&-meta-divider-wrapper {
		display: flex;
		position: relative;
		align-items: center;
		margin: 0 -15px;
		margin-top: 30px;
	}
	&-meta-divider-line {
		position: relative;
		background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));
		width: 100%;
		height: 1px;
		left: 0%;
		top: 0%;
		right: 0%;
		bottom: auto;
		&.left-line{
			background-image: linear-gradient(-90deg, #46494D, rgba(33, 38, 45, 0));
		}
		&-right-line{
			background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));
		}
	}
	&-meta-divider-title {
		position: relative;
		padding: 0 15px;
		width: max-content;
		font-size: 17px;
		color: var(--rs-black);
	}
	&-label{
		color: var(--rs-black);
	}
}
