@import "tokens.css";
@import "core.css";

.passkey-info {
  font-size: var(--font-size-lg);
  gap: var(--space-200);
  padding: var(--space-400);
  border-radius: var(--radii-200);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-light-200);
  margin-top: var(--space-400);
}

.passkey-info li {
  line-height: var(--font-line-height-md);
}

.email-info {
  font-size: var(--font-size-sm);
  padding-bottom: var(--space-300);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.email-info strong {
  border-radius: var(--radii-400);
  background-color: var(--color-grey-100);
  padding: var(--space-100) var(--space-400);
}

.info-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  color: var(--color-grey-400);
}

.info-text p {
  margin: 0;
}

.info-link {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  color: var(--color-grey-400);
  font-weight: var(--font-weight-bold);
  text-underline-offset: var(--space-100);
  display: block;
}

.info-link:hover {
  color: var(--color-primary-400);
}

.error-message {
  color: var(--color-error-400);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  display: block;
}

.info-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
  vertical-align: middle;
}

.info-icon {
  color: var(--color-grey-400);
  flex-shrink: 0;
}

/* Custom tooltip */
.info-icon-wrapper::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: -14px;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  border-radius: var(--radii-200);
  white-space: normal;
  width: 240px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 1000;
}

/* Tooltip arrow */
.info-icon-wrapper::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 1000;
}

/* Show tooltip on hover */
.info-icon-wrapper:hover::before,
.info-icon-wrapper:hover::after {
  opacity: 1;
}

.submit-button {
  padding: var(--space-400) var(--space-700);
  border-radius: var(--radii-700);
  font-size: var(--font-size-xl);
  margin-top: var(--space-400);
}

.form-input {
  padding: var(--space-300) var(--space-300);
}

.form {
  gap: var(--space-200);
}

.form-hint {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: var(--font-size-xs);
}

.register-content-wrapper {
  gap: var(--space-400);
}