.password-conditions {
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  margin-bottom: 0;
}

.password-conditions__base,
.password-conditions__extra {
  margin-bottom: var(--prism-spacing-200);
}

.password-conditions__extra {
  margin-top: var(--prism-spacing-400);
}

.login-wrapper-container {
  background-color: var(--prism-color-background-neutral-subdued);
}

.login-wrapper {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(100vh - 1px);
  overflow: hidden;
  position: relative;
}

.login-wrapper__left-side {
  padding: 0 100px;
  z-index: 2;
}

.login-wrapper__tagline {
  color: var(--prism-color-text-neutral-emphasis);
  font-size: 39px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 500px;
}

.login-wrapper__content {
  border-radius: var(--prism-border-radius-100);
  position: relative;
  width: 400px; /* Fixed width as per Figma */
  z-index: 1;
}

.sun-wrapper {
  align-items: center;
  display: flex;
  height: 700px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  z-index: -1;
}

.sun {
  animation: rotate-sun 15s infinite linear;
  /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */
  background: radial-gradient(
    69.89% 1000% at 6.33% 70.61%,
    #f88640 0%,
    #fcce84 100%
  );
  /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */
  border-radius: 100%;
  /* stylelint-disable-next-line color-no-hex */
  filter: blur(150px) drop-shadow(24px 24px 24px #ff9552) saturate(1.2);
  inset: 0;
  position: absolute;
}

@keyframes rotate-sun {
  0% {
    transform: rotate(0) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.login-card .password__save-btn > * {
  width: 100%;
}

.login-card .spider-migration-message {
  margin-top: var(--prism-spacing-200);
  min-width: 480px;
}

.login-card .spider-migration-message h4.title {
  color: var(--prism-color-text-info-default);
}

.login-card .spider-migration-message .spider-migration-link {
  color: var(--prism-color-text-neutral-default);
  text-decoration: underline;
}

.login-card__form {
  margin: var(--prism-spacing-1000) 0;
}

.login-card__form .prism-card__content {
  padding: var(--prism-spacing-1000);
}

.login-card__explanation {
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  margin-bottom: var(--prism-spacing-800);
  text-align: center;
}

.login-card__explanation:last-child {
  margin-bottom: 0;
}

.login-card__footer {
  line-height: 16px;
  margin-top: var(--prism-spacing-600);
  text-align: center;
}

.login-card__footer p {
  margin-bottom: var(--prism-spacing-300);
}

.login-card__footer p:last-of-type {
  margin-bottom: 0;
}

.login-card__footer a {
  color: var(--prism-color-interactive-background-primary-idle);
  text-decoration: underline;
}

.login-card .spider-logo {
  display: inline-flex;
  height: 48px;
  min-width: 38px;
  place-items: center center;
}

@media screen and (width >= 1024px) {
  .password-input-flex {
    gap: var(--prism-spacing-900);
  }

  .password-input-flex .password-conditions {
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    margin-bottom: none;
  }

  .login-wrapper__content {
    margin: 0 auto;
  }
}

@media only screen and (width <= 992px) {
  .login-wrapper {
    display: flex;
    flex-direction: column;
    padding: 100px var(--prism-spacing-500) var(--prism-spacing-500);
  }

  .login-wrapper__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 100px 0 0;
    width: 100%;
  }

  .login-card {
    max-width: 500px;
    width: 100%;
  }

  .login-wrapper__right-side {
    width: 100%;
  }

  .login-wrapper__left-side {
    padding: 0;
  }

  .login-wrapper__tagline {
    font-size: 28px;
  }

  .sun-wrapper {
    height: 400px;
    width: 400px;
  }

  .sun {
    /* stylelint-disable-next-line color-no-hex */
    filter: blur(100px) drop-shadow(16px 16px 16px #fc9250) saturate(1.2);
  }
}

.spider-banner {
  align-items: center;
  background-color: var(--prism-color-background-info-subdued);
  border: 1px solid var(--prism-color-border-info-default);
  border-radius: var(--prism-spacing-200);
  color: var(--prism-color-text-neutral-default);
  line-height: 20px;
  padding: var(--prism-spacing-300);
  position: relative;
  white-space: normal;
}

.spider-banner-title {
  color: var(--prism-color-text-info-default);
}