/* Default login page, colored by the active set in inc/set-warna.php. */

body.login {
	--wp-admin-theme-color: var(--warna-aksen-kuat);
	--wp-admin-theme-color-darker-10: var(--warna-aksen-hover);
	--wp-admin-theme-color-darker-20: var(--warna-aksen-hover);
	background: var(--warna-latar);
	color: var(--warna-teks);
}

.login form,
.login .message,
.login .notice,
.login .success,
.login .notice-error {
	background: var(--warna-header-latar);
	border-color: var(--warna-garis);
	color: var(--warna-header-teks);
}

.login .message,
.login .notice,
.login .success {
	border-left-color: var(--warna-aksen-kuat);
}

.login .notice-error {
	border-left-color: var(--warna-aksen);
}

.login form label,
.login .admin-email__heading,
.login .admin-email__details,
.login .description,
.login .indicator-hint {
	color: var(--warna-header-teks);
}

.login form a,
.login .message a,
.login .notice a,
.login .success a {
	color: var(--warna-aksen-kuat);
}

.login form a:hover,
.login .message a:hover,
.login .notice a:hover,
.login .success a:hover {
	color: var(--warna-aksen-hover);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #fff;
	border-color: var(--warna-garis-3);
	color: var(--warna-isian-teks);
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--warna-aksen-kuat);
	box-shadow: 0 0 0 1px var(--warna-aksen-kuat);
	color: var(--warna-isian-fokus);
}

.login .button-primary,
.wp-core-ui .button-primary {
	background: var(--warna-aksen-kuat);
	border-color: var(--warna-aksen-kuat);
	color: #fff;
}

.login .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--warna-aksen-hover);
	border-color: var(--warna-aksen-hover);
	color: #fff;
}

.login .button.wp-hide-pw,
.login .button.wp-hide-pw .dashicons {
	color: var(--warna-aksen-kuat);
}

.login #nav,
.language-switcher label,
.language-switcher label .dashicons {
	color: var(--warna-teks);
}

.login #nav a,
.login .privacy-policy-link {
	color: var(--warna-tautan);
}

.login #nav a:hover,
.login .privacy-policy-link:hover {
	color: var(--warna-tautan-hover);
}

/* Links */

.login a,
.login a:hover,
.login a:focus,
.login #nav a,
.login #nav a:hover,
.login #nav a:focus,
.login form a,
.login .message a,
.login .notice a,
.login .success a,
.login .privacy-policy-link {
	text-decoration: none;
}

.login #backtoblog {
	display: none;
}

.login #nav {
	margin: 8px 0 0;
	padding: 0;
	font-size: 16px;
	text-align: right;
}

/* Background image, set in Mahanani > Latar Login. */

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: var(--mahanani-login-latar);
	background-position: center;
	background-size: cover;
	opacity: 0.15;
	pointer-events: none;
}

.login .language-switcher,
.login .privacy-policy-page-link {
	position: relative;
	z-index: 1;
}

/* Layout: box in the top right corner, logo in the top left corner. */

.login #login {
	position: relative;
	z-index: 1;
	margin: 0 24px 0 auto;
	padding: 24px 0;
}

.login h1.wp-login-logo {
	position: fixed;
	top: 24px;
	left: 24px;
	margin: 0;
}

.login h1.wp-login-logo a {
	width: min(420px, calc(100vw - 392px));
	height: auto;
	margin: 0;
}

.login h1.wp-login-logo a,
.login h1.wp-login-logo a:hover,
.login h1.wp-login-logo a:focus,
.login h1.wp-login-logo a:active {
	outline: none;
	box-shadow: none;
	cursor: pointer;
}

/* Wide boxes and small screens keep the logo above the box. */

.login-action-confirm_admin_email h1.wp-login-logo,
.interim-login h1.wp-login-logo {
	position: static;
	margin: 0 0 24px;
}

.login-action-confirm_admin_email h1.wp-login-logo a,
.interim-login h1.wp-login-logo a {
	width: 240px;
	margin: 0 auto;
}

@media (max-width: 782px) {

	.login #login {
		width: min(320px, calc(100% - 32px));
		margin: 0 auto;
		padding: 16px 0;
	}

	.login h1.wp-login-logo {
		position: static;
		margin: 0 0 24px;
	}

	.login h1.wp-login-logo a {
		width: min(280px, 100%);
		margin: 0 auto;
	}
}

.login .language-switcher .button {
	background: var(--warna-tombol-latar);
	border-color: var(--warna-tombol-latar);
	color: var(--warna-tombol-teks);
}