:root {
  --credits-popover-tooltip-padding: 1.5rem;
  --credits-popover-tooltip-content-label-size: 2rem;
  --credits-popover-tooltip-content-font-size: 1.6rem;
  --credits-popover-tooltip-content-line-height: 1.5;
  --credits-popover-tooltip-content-gap: var(--credits-popover-tooltip-padding);
  --credits-popover-cta-button-height: 3rem;
  --archive-event-list-item-call-to-action-icon-dimensions: 1.4rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --credits-popover-tooltip-padding: 1rem;
    --credits-popover-tooltip-content-label-size: 1.6rem;
    --credits-popover-tooltip-content-font-size: 1.3rem;
    --credits-popover-cta-button-height: 2.4rem;
    --archive-event-list-item-call-to-action-icon-dimensions: 1rem;
  }
}

.credits-popover-tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--credits-popover-tooltip-content-gap);
  max-width: 32rem;
  padding: var(--credits-popover-tooltip-padding);
}

.credits-popover-tooltip-content * {
  margin: 0;
}

.credits-popover-tooltip-content-label {
  text-align: center;
  font-family: var(--typography-header-font-family);
  color: var(--theme-color-border);
  font-size: var(--credits-popover-tooltip-content-label-size);
  font-weight: 500;
  line-height: var(--credits-popover-tooltip-content-line-height);
  gap: var(--credits-popover-tooltip-content-gap);
}

.credits-popover-tooltip-content-text {
  color: var(--theme-color-primary);
  font-size: var(--credits-popover-tooltip-content-font-size);
  line-height: var(--credits-popover-tooltip-content-line-height);
}

.credits-popover-tooltip-credits-list {
  display: flex;
  flex-direction: column;
}

.credits-popover-tooltip-credits-list-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.credits-popover-tooltip-credits-list dt {
  flex: 0 0 auto;
}

.credits-popover-tooltip-credits-list dd {
  flex: 0 1 auto;
}

.credits-popover-tooltip-cta-button {
  font-family: var(--typography-header-font-family);
  display: inline-flex;
  align-items: center;
  background-color: var(--theme-color-secondary);
  font-size: var(--credits-popover-tooltip-content-font-size);
  height: var(--credits-popover-cta-button-height);
  padding: 0 calc(var(--credits-popover-cta-button-height) * 0.5);
  gap: calc(var(--credits-popover-cta-button-height) * 0.25);
  border-radius: calc(var(--credits-popover-cta-button-height) * 0.5);
  color: inherit;
}

.credits-popover-tooltip-content .credits-popover-tooltip-cta-button {
  color: inherit;
  text-decoration: inherit;
}

.credits-popover-tooltip-cta-button-icon {
  width: var(--archive-event-list-item-call-to-action-icon-dimensions);
  height: var(--archive-event-list-item-call-to-action-icon-dimensions);
}

.credits-popover-tooltip-cta-button-icon svg path {
  fill: var(--theme-color-border);
}