.login {
  :global {
    .ant-form-item-label {
      padding: 0;
    }
    .ant-form-item-explain-error {
      color: var(--warn-text);
      font-size: 12px;
    }
    .ant-input-status-error,
    .ant-input-affix-wrapper-status-error {
      border-color: var(--warn-text) !important;
    }
  }
}

.login-toast {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  animation: login-toast-in 150ms ease-out;
}

.login-toast[data-phase="out"] {
  animation: login-toast-out 200ms ease-out forwards;
}

@keyframes login-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes login-toast-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-toast,
  .login-toast[data-phase="out"] {
    animation: none;
  }
}

.login-method-tab {
  :global {
    .ant-tabs-nav {
      margin: 24px 0 12px 0;
    }
    .ant-tabs-tab {
      padding: 6px 0;
    }
  }
}
