:where(.prepaid-card) {
  --prepaid-card-header-height: 6.375rem;
  --prepaid-card-curve-height: var(--boxel-sp-xl); /* the curved part that the header and content overlap in */

  position: relative;
  width: 22.75rem; /* 364px */
  min-height: 14.375rem; /* 230px */
  display: grid;
  grid-template-rows: calc(var(--prepaid-card-header-height) - var(--prepaid-card-curve-height)) var(--prepaid-card-curve-height) 1fr;
  grid-template-columns: 1fr;
  border-radius: var(--boxel-border-radius);
  color: var(--boxel-dark);
  font: var(--boxel-font);
  letter-spacing: var(--boxel-lsp);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background: var(--boxel-light);
}

.prepaid-card__header {
  grid-row: 1 / span 2;
  grid-column: 1 / 2;
  display: flex;
  justify-content: space-between;
  background: transparent;
  border-top-right-radius: var(--boxel-border-radius);
  border-top-left-radius: var(--boxel-border-radius);
  padding: var(--boxel-sp);
  color: var(--header-text-color);
  text-shadow: 0 1px var(--header-pattern-color);
  font: var(--boxel-font-xs);
  letter-spacing: var(--boxel-lsp);
}

.prepaid-card__header > * {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.prepaid-card__meta {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.prepaid-card__type {
  margin-bottom: auto;
  font: 700 var(--boxel-font-xs);
}

.prepaid-card__network {
  text-transform: uppercase;
}

.prepaid-card__content {
  grid-row: 2 / span 2;
  grid-column: 1 / 2;

  /*
    The top padding precludes content from sitting on the curved area of the background
  */
  padding: var(--prepaid-card-curve-height) var(--boxel-sp) var(--boxel-sp-sm);
  background-image: url('/images/backgrounds/curved-platter.svg');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0 0 var(--boxel-border-radius) var(--boxel-border-radius);
  overflow: hidden;
  z-index: 1;
}

.prepaid-card__name {
  font: var(--boxel-font-sm);
  font-weight: 700;
  max-width: 10rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.prepaid-card__address {
  font-family: 'Roboto Mono', monospace;
  font-size: 1.125rem; /* 18px */
  letter-spacing: var(--boxel-lsp-sm);
  line-height: calc(24 / 18);
}

.prepaid-card__balance-label {
  color: var(--boxel-purple-700);
  font: var(--boxel-font-sm);
  letter-spacing: 0.01em;
}

.prepaid-card__balance--mock {
  opacity: 0.1;
}

.prepaid-card__balance {
  margin-right: 4px;
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  line-height: calc(55 / 40);
  overflow-wrap: break-word;
  word-break: break-word;
}

.prepaid-card__usd-balance {
  margin-top: 1rem;
  font-weight: 700;
}

.prepaid-card__usd-balance--mock {
  opacity: 0.25;
}

.prepaid-card__content-rs {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: end;
  gap: var(--boxel-sp);
  padding: var(--boxel-sp-sm) var(--boxel-sp);
  text-align: right;
  z-index: -1;
}

.prepaid-card__logo {
  width: 45px;
  height: 45px;
  background-image: url('/images/icons/cardstack-logo-engraved.svg');
  background-repeat: no-repeat;
}

.prepaid-card__attributes {
  color: var(--boxel-purple-300);
  font: var(--boxel-font-xs);
  font-weight: 600;
  letter-spacing: var(--boxel-lsp-xl);
  text-transform: uppercase;
}

.prepaid-card__background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  border-radius: var(--boxel-border-radius);
  z-index: 0;
}

.prepaid-card__background--color {
  background: var(--header-background);
}

.prepaid-card__background--pattern {
  background-color: var(--header-pattern-color);
  -webkit-mask-size: cover;
  -webkit-mask-image: var(--header-theme);
  -webkit-mask-position: center;
  mask-size: cover;
  mask-image: var(--header-theme);
  mask-position: center;
}