@use '../utils' as *;

/*----------------------------------------*/
/* authentication style
/*----------------------------------------*/
.rock-auth-section  {
    padding: 100px 0;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    position: relative;
    @media #{$x3l} {
        padding: 80px 0;
    }
    @media #{$xs,$sm,$md,$lg,$xl,$xxl} {
        padding: 60px 0;
    }
}
.rock-auth-wrapper {
    position: relative;
    .rock-auth-shapes {
        .shape-one {
            position: absolute;
            bottom: 0;
            left: 12%;
            z-index: -1;
            filter: blur(2px);
        }
        .shape-two {
            position: absolute;
            top: -5%;
            right: -11%;
            z-index: -1;
        }
        @media #{$xs,$sm} {
            display: none;
        }
    }
}
.rock-auth-main-inner {
    background: rgba($color: $white, $alpha: .08);
    mix-blend-mode: normal;
    border: 1px solid rgba($color: $white, $alpha: .08);
    backdrop-filter: blur(2px);
    @include border-radius(20px);
    max-width: 858px;
    margin: 0 auto;
    padding: 60px 60px;
    @media #{$xs,$sm} {
        padding: 30px 30px;
    }
    @media #{$xxs} {
        padding: 30px 20px;
    } 
}
.rock-auth-logo {
    text-align: center;
    margin-bottom: 55px;
    @media #{$xs,$sm} {
        margin-bottom: 35px; 
    }
}
.rock-auth-content {
	text-align: center;
	margin-bottom: 85px;
    @media #{$xs,$sm} {
    margin-bottom: 35px;
    }
    @media #{$md} {
    margin-bottom: 50px;
    }
	.title {
		font-size: 30px;
		color: var(--td-white);
		margin-bottom: 7px;
        @media #{$xxs} {
            font-size: 22px;
        }
        @media #{$xs,$sm} {
            font-size: 24px;
        }
        @media #{$md} {
            font-size: 26px;
        }
	}
	.description {
		font-size: 14px;
		font-weight: 500;
	}
}
.rock-auth-bottm {
    text-align: center;
    margin-top: 60px;
    .rock-auth-btn {
        margin-bottom: 24px;
        .site-btn {
            padding: 0 60px;
        }
    }
    .description {
        font-size: 14px;
        font-weight: 500;
        .text-link {
            background: linear-gradient(135deg, rgb(253, 214, 141) 0%, rgb(251, 148, 134));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            font-weight: 900;
        }
    }
}
.rock-auth-checkbox {
    margin-top: 20px;
    input[type="checkbox"] {
        display: none;
        &:checked {
            ~ {
                label {
                    &::before {
                        @include transform(scale(1));
                    }
                }
            }
            & ~ label {
                &::before{
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
        ~label {
            position: relative;
            padding-inline-start: 30px;
            z-index: 1;
            &::after {
                position: absolute;
                content: '';
                top: 2px;
                left: 0;
                width: 18px;
                height: 18px;
                line-height: 16px;
                text-align: center;
                border: 1px solid #C3C7C9;
                z-index: -1;
                transition: all .2s linear;
                border-radius: 4px;
            }
            &::before {
                position: absolute;
                content: "\f00c";
                top: 3px;
                left: 0px;
                width: 18px;
                height: 18px;
                line-height: 16px;
                text-align: center;
                visibility: hidden;
                opacity: 0;
                color: var(--td-white);
                transition: all 0.2s linear;
                font-family: var(--td-ff-fontawesome);
                font-size: 10px;
            }
            &:hover {
                cursor: pointer;
            }
        }
    }
    .terms-condition {
        font-size: 14px;
        font-weight: 500;
        color: var(--td-white);
        a {
            background: linear-gradient(135deg, rgb(253, 214, 141) 0%, rgb(251, 148, 134));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            font-weight: 900;
        }
    }
}
.rock-auth-remember-inner {
    @include flexbox();
    align-self: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 5px;
    .rock-auth-checkbox {
        margin-top: 0;
    }
    .rock-auth-forgot {
        p {
            a {
                background: linear-gradient(135deg, rgb(253, 214, 141) 0%, rgb(251, 148, 134));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
                font-size: 14px;
                font-weight: 900;
            }
        }
    }
}

// auth alert
.td-alert {
	&.alert-input {
		background: rgba($white, $alpha: 0.08);
		mix-blend-mode: normal;
		border: 1px solid rgba($white, $alpha: 0.08);
		border-radius: 32px;
		padding-top: 7px;
		padding-bottom: 7px;
		padding-left: 12px;
		display: inline-block;
        padding-right: 40px;
		p {
			margin: 0;
			font-size: 12px;
			font-weight: 500;
			color: var(--td-white);
		}
	}
    &.alert-dismissible {
        .btn-close {
            background-image: none;
            width: 30px;
            height: 30px;
            top: 50%;
            transform: translateY(-50%);
            padding: 0;
            right: 5px;
        }
    }
}

