/**
 * Ionis Contact Field component styles
 *
 * Colors and the label column width are custom properties so the location
 * card can switch to white text on its pink panel.
 */
.ionis-contact-field {
  display: grid;
  grid-template-columns: var(--contact-field-label-width, 78px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: var(--contact-field-align, center);
  padding: 8px 0;
}

.ionis-contact-field__label {
  font-size: var(--fs-headingxxs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--contact-field-label-color, var(--color-gray-dark));
}

.ionis-contact-field__value {
  font-size: var(--fs-headingxs);
  font-weight: var(--fw-book);
  line-height: 1.5;
  color: var(--contact-field-value-color, var(--color-gray-dark));
  overflow-wrap: anywhere;
}

/* Extra class selector to win over the generic .layout-container a color */
.ionis-contact-field a.ionis-contact-field__value {
  color: var(--contact-field-link-color, var(--color-purple));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ionis-contact-field a.ionis-contact-field__value:hover {
  text-decoration-thickness: 2px;
}