/* ==========================================
   AUTH PAGES (login)
   Discord button and status messages.
   Loaded after login.css.
========================================== */

.login-card h1,
.login-card h1 span,
.login-description {
  text-align: left !important;
}

.login-card h1 span {
  color: inherit;
}

.login-description {
  margin-top: 8px;
  margin-bottom: 26px;
}

/* Discord button: the only way in, so it gets the full card width */

.discord-button {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 49px;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  overflow: hidden;

  color: #ffffff;

  background: linear-gradient(120deg, #5865f2, #4752c4);
  border: 1px solid rgba(255, 124, 234, .55);
  border-radius: 10px;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow: 0 5px 22px #5865f235;

  transition:
    transform .25s var(--ease),
    box-shadow .25s ease,
    filter .25s ease;
}

/* Same sweep as the old Sign In button */
.discord-button::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: -60%;
  left: -100%;

  width: 65%;
  height: 220%;

  background: linear-gradient(
    90deg,
    transparent,
    #ffffff55,
    transparent
  );

  transform: rotate(25deg);
  transition: left .65s var(--ease);
}

.discord-button:hover::before {
  left: 150%;
}

.discord-button .discord-icon {
  display: block;
  width: 24px;
  height: 24px;

  border-radius: 7px;
  object-fit: cover;
}

.discord-button .discord-button-text {
  flex: 0 0 auto;
  text-align: center;
}

.discord-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 8px 32px #5865f255;
}

.discord-button:active {
  transform: translateY(0) scale(.98);
}

.discord-button:disabled {
  opacity: .6;
  cursor: not-allowed;

  transform: none;
  filter: none;
  box-shadow: none;
}

.discord-button:disabled::before {
  display: none;
}