/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
      --tw-border-style: solid;
      --tw-duration: initial;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.IncodeIdentityReusePage {
  animation: .4s ease-out fadeIn;
}

.IncodeIdentityReusePage .IncodeIdentityReuseBody {
  padding-top: var(--spacing-32);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseList {
  gap: var(--spacing-8, var(--spacing-8, 8px));
  flex-direction: column;
  width: 100%;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCard {
  cursor: pointer;
  border-radius: var(--radius-medium, var(--border-radius-medium));
  border-style: var(--tw-border-style);
  width: 100%;
  padding: var(--spacing-16, var(--spacing-16, 16px));
  text-align: left;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .2s;
  background-color: var(--surface-neutral-0);
  border-width: 1px;
  border-color: var(--border-neutral-100);
  flex-direction: column;
  align-items: stretch;
  transition-duration: .2s;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCard:hover {
  border-color: var(--border-neutral-200);
}

.IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
  outline: var(--focus-outline-width) solid var(--border-status-focus);
  outline-offset: var(--focus-outline-width);
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
  background-color: var(--surface-brand-50);
  border-color: var(--border-brand-500);
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardBody {
  gap: var(--spacing-8, var(--spacing-8, 8px));
  flex-direction: column;
  flex: 1;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardHeader {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardHeaderLeft {
  align-items: center;
  gap: var(--spacing-12, var(--spacing-12, 12px));
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardTypeLabel {
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-m-regular-size);
  font-weight: var(--typography-body-m-regular-weight);
  line-height: var(--typography-body-m-regular-line-height);
  letter-spacing: var(--typography-body-m-regular-letter-spacing);
  color: var(--text-body-800-primary);
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardIdentifier {
  margin: var(--spacing-0, var(--spacing-none, 0px));
  align-items: center;
  gap: var(--spacing-8, var(--spacing-8, 8px));
  font-family: var(--typography-headline-family);
  font-size: var(--typography-headline-h5-size);
  font-weight: var(--typography-headline-h5-weight);
  line-height: var(--typography-headline-h5-line-height);
  letter-spacing: var(--typography-headline-h5-letter-spacing);
  color: var(--text-body-800-primary);
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseCardVerified {
  margin: var(--spacing-0, var(--spacing-none, 0px));
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-m-regular-size);
  font-weight: var(--typography-body-m-regular-weight);
  line-height: var(--typography-body-m-regular-line-height);
  letter-spacing: var(--typography-body-m-regular-letter-spacing);
  color: var(--text-body-500-secondary);
}

.IncodeIdentityReusePage .IncodeIdentityReuseBadgeRecommended {
  border-radius: var(--radius-x-small, var(--border-radius-x-small));
  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
  padding-block: var(--spacing-2, var(--spacing-2, 2px));
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-s-regular-size);
  font-weight: var(--typography-body-s-regular-weight);
  line-height: var(--typography-body-s-regular-line-height);
  letter-spacing: var(--typography-body-s-regular-letter-spacing);
  background-color: var(--surface-brand-500-static);
  color: var(--text-body-0-static);
  align-items: center;
  display: inline-flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseBadgeSlowest {
  border-radius: var(--radius-x-small, var(--border-radius-x-small));
  border-style: var(--tw-border-style);
  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
  padding-block: var(--spacing-2, var(--spacing-2, 2px));
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-s-regular-size);
  font-weight: var(--typography-body-s-regular-weight);
  line-height: var(--typography-body-s-regular-line-height);
  letter-spacing: var(--typography-body-s-regular-letter-spacing);
  background-color: var(--surface-neutral-50);
  border-width: 1px;
  border-color: var(--border-neutral-200);
  color: var(--text-body-800-primary);
  align-items: center;
  display: inline-flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseScanNewCard {
  align-items: center;
  gap: var(--spacing-20);
  flex-direction: row;
}

.IncodeIdentityReusePage .IncodeIdentityReuseScanNewBody {
  align-items: center;
  gap: var(--spacing-12, var(--spacing-12, 12px));
  flex: 1;
  display: flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseRadio {
  border-radius: var(--radius-full, var(--border-radius-full));
  border-style: var(--tw-border-style);
  width: var(--spacing-24);
  height: var(--spacing-24);
  background-color: var(--surface-neutral-50);
  border-width: 1px;
  border-color: var(--border-neutral-200);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.IncodeIdentityReusePage .IncodeIdentityReuseRadioChecked {
  background-color: var(--surface-brand-500-static);
  border-color: var(--surface-brand-500-static);
}

.IncodeIdentityReusePage .IncodeIdentityReuseRadioInner {
  border-radius: var(--radius-full, var(--border-radius-full));
  width: var(--spacing-8);
  height: var(--spacing-8);
  background-color: var(--surface-neutral-0-static);
  display: block;
}

.IncodeIdentityReusePage .IncodeIdentityReuseActions {
  gap: var(--spacing-12, var(--spacing-12, 12px));
  padding-top: var(--spacing-16);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}