/*
 * Login / Register submit buttons, matched pixel-for-pixel to the homepage
 * header button shown in the reference image.
 *
 * Every value below was read directly off that live element
 * (.main-header__btn .aigence-btn__text in get-assets/css/aigence.css), not
 * estimated. The header applies a size override on top of the base rule, so
 * the reference is:
 *
 *   .aigence-btn__text                    padding 19px 30px; font-size 14px
 *   .main-header__btn .aigence-btn__text  padding 12.5px 20.25px; font-size 12px   <-- the reference
 *
 * Reference computed values (Chrome):
 *   background     linear-gradient(90deg, #D930AA 0%, #3E5DFF 100%)
 *   border-radius  100px          padding        12.5px 20.25px
 *   font-size      12px           font-weight    800
 *   line-height    15.42px        text-transform uppercase
 *   color          #FFFFFF        letter-spacing normal
 *   border         none           box-shadow     none
 *   transition     0.5s           rendered       79 x 40 px
 *   hover          ::after (reversed gradient) fades opacity 0 -> 1 over 0.5s
 *
 * Loaded only by auth/login.html and auth/register.html, so no other page's
 * CSS is affected. Cosmetic only - no markup, handler, id, name or route is
 * touched by this file.
 */

/* Reference font. Argon's body font differs, so it is set on the button alone
   rather than anywhere that could affect surrounding text. */
.aigence-auth-btn {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 15.42px;
	text-transform: uppercase;
	letter-spacing: normal;
	text-align: center;
	color: #FFFFFF;

	padding: 12.5px 20.25px;
	border: none;
	border-radius: 100px;
	box-shadow: none;

	/* The reference is an inline pill sized by its padding, not a full-width
	   block. Both buttons sit inside <div class="text-center">, which keeps
	   them centred once the Bootstrap w-100 width is released. */
	width: auto;
	display: inline-block;

	background-color: transparent;
	background-image: linear-gradient(90deg, #D930AA 0%, #3E5DFF 100%);

	position: relative;
	z-index: 1;
	overflow: hidden;
	cursor: pointer;
	vertical-align: middle;
	-webkit-appearance: none;
	transition: all 500ms ease;
}

/* Hover/active fill: the reference cross-fades to the reversed gradient via an
   overlay, because CSS cannot animate between two gradient values directly. */
.aigence-auth-btn::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	background-image: linear-gradient(90deg, #3E5DFF 0%, #D930AA 100%);
	transition: all 500ms ease;
}

.aigence-auth-btn:hover::after,
.aigence-auth-btn:active::after,
.aigence-auth-btn:focus-visible::after {
	opacity: 1;
}

/* Hold the reference appearance through Bootstrap's own :hover/:focus/:active
   treatments, which would otherwise repaint the background and add a focus
   ring the reference does not have. */
.aigence-auth-btn:hover,
.aigence-auth-btn:focus,
.aigence-auth-btn:active,
.aigence-auth-btn:focus-visible,
.aigence-auth-btn:not(:disabled):not(.disabled):active,
.aigence-auth-btn:not(:disabled):not(.disabled):active:focus {
	color: #FFFFFF;
	border: none;
	box-shadow: none;
	outline: none;
	background-color: transparent;
	background-image: linear-gradient(90deg, #D930AA 0%, #3E5DFF 100%);
	transform: none;
}

.aigence-auth-btn:disabled,
.aigence-auth-btn.disabled {
	opacity: 0.65;
}