@rhds/elements/elements/rh-cta/rh-cta-lightdom-shim.css

Red Hat Design System Elements

rh-cta:not(:defined) {
  width: fit-content !important;
  display: inline-flex !important;
  color: var(--rh-cta-color);
  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
  font-weight: 600; /* WARNING: not a token value */
  line-height: var(--rh-line-height-body-text, 1.5);
  background-color: var(--rh-cta-background-color);
  border-color: var(--rh-cta-border-color, transparent);
  border-radius: var(--rh-border-radius-default, 3px);
  border-width: var(--rh-border-width-sm, 1px);
}

rh-cta:not(:defined, [variant]) {
  --rh-cta-background-color: transparent;
  --rh-cta-border-color: transparent;
  --rh-cta-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
  --rh-cta-hover-background-color: transparent;
  --rh-cta-hover-border-color: transparent;
  --rh-cta-hover-inner-border-color: transparent;
  --rh-cta-hover-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
  --rh-cta-hover-text-decoration: none;
  --rh-cta-focus-background-color: transparent;
  --rh-cta-focus-container-background-color: #0066cc1a;
  --rh-cta-focus-border-color: transparent;
  --rh-cta-focus-inner-border-color: transparent;
  --rh-cta-focus-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
  --rh-cta-focus-text-decoration: none;
  --rh-cta-active-container-background-color: #0066cc1a;
  --rh-cta-active-inner-border-color: transparent;
  --rh-cta-active-text-decoration: none;
}

[data-rh-theme^='dark'] rh-cta:not(:defined, [variant]),
[color-palette^='dark'] rh-cta:not(:defined, [variant]),
rh-cta[color-palette^='dark']:not(:defined, [variant]) {
  --rh-cta-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
  --rh-cta-hover-color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);

  /* --rh-color-interactive-blue-lighter with 25% opacity */
  --rh-cta-focus-container-background-color: #73bcf740;
  --rh-cta-focus-border-color: transparent;
  --rh-cta-focus-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
  --rh-cta-focus-inner-border-color: transparent;
  --rh-cta-focus-text-decoration: none;

  /* --rh-color-interactive-blue-lighter with 25% opacity */
  --rh-cta-active-container-background-color: #73bcf740;
  --rh-cta-active-text-decoration: none;
}

rh-cta:not(:defined):focus-within {
  border-color: var(--rh-cta-focus-border-color);
  background-color:
    var(--rh-cta-focus-container-background-color,
      var(--rh-cta-focus-background-color));

  --rh-cta-color: var(--rh-cta-focus-color);
  --rh-cta-text-decoration: var(--rh-cta-focus-text-decoration);
}

rh-cta:not(:defined):hover {
  color: var(--rh-cta-hover-color);
  border-color: var(--rh-cta-hover-border-color);
  background-color: var(--rh-cta-hover-background-color);

  --rh-cta-text-decoration: var(--rh-cta-hover-text-decoration);
}

rh-cta:not(:defined):active {
  background-color: var(--rh-cta-active-background-color);
  color: var(--rh-cta-active-color);
}

rh-cta[variant='primary']:not(:defined) {
  border-style: solid;

  --rh-cta-background-color: var(--rh-color-brand-red-on-light, #ee0000);
  --rh-cta-border-color: var(--rh-color-brand-red-on-light, #ee0000);
  --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-hover-background-color: var(--rh-color-brand-red-dark, #a60000);
  --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
  --rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-focus-background-color: var(--rh-color-brand-red-on-light, #ee0000);
  --rh-cta-focus-border-color: var(--rh-color-brand-red-on-light, #ee0000);
  --rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-focus-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-active-background-color: var(--rh-color-brand-red-dark, #a60000);
  --rh-cta-active-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
}

[data-rh-theme^='dark'] rh-cta[variant='primary']:not(:defined),
[color-palette^='dark'] rh-cta[variant='primary']:not(:defined),
rh-cta[variant='primary'][color-palette^='dark']:not(:defined) {
  --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
}

rh-cta[variant='secondary']:not(:defined) {
  border-style: solid;

  --rh-cta-background-color: transparent;
  --rh-cta-border-color: var(--rh-color-border-strong-on-light, #151515);
  --rh-cta-color: var(--rh-color-text-primary-on-light, #151515);
  --rh-cta-hover-background-color: var(--rh-color-surface-darkest, #151515);
  --rh-cta-hover-border-color: var(--rh-color-border-strong-on-light, #151515);
  --rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-focus-background-color: var(--rh-color-surface-lighter, #f2f2f2);
  --rh-cta-focus-border-color: var(--rh-color-border-strong-on-light, #151515);
  --rh-cta-focus-color: var(--rh-color-surface-darkest, #151515);
  --rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
  --rh-cta-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-active-background-color: var(--rh-color-border-strong-on-light, #151515);
  --rh-cta-active-inner-border-color: var(--rh-color-surface-light, #e0e0e0);
}

[data-rh-them^='dark'] rh-cta[variant='secondary']:not(:defined),
[color-palette^='dark'] rh-cta[variant='secondary']:not(:defined),
rh-cta[variant='secondary'][color-palette^='dark']:not(:defined) {
  --rh-cta-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
  --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-hover-background-color: var(--rh-color-surface-lightest, #ffffff);
  --rh-cta-hover-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
  --rh-cta-hover-color: var(--rh-color-text-primary-on-light, #151515);
  --rh-cta-focus-background-color: var(--rh-color-surface-dark, #383838);
  --rh-cta-focus-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
  --rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
  --rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --rh-cta-active-color: var(--rh-color-text-primary-on-light, #151515);
  --rh-cta-active-background-color: var(--rh-color-surface-lightest, #ffffff);
  --rh-cta-active-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
}

rh-cta[variant='brick']:not(:defined) {
  border-style: solid;
  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
  font-weight: var(--rh-font-weight-body-text-regular, 400);

  --rh-cta-background-color: transparent;
  --rh-cta-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --rh-cta-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
  --rh-cta-hover-background-color: var(--rh-color-surface-lighter, #f2f2f2);
  --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --rh-cta-hover-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
  --rh-cta-hover-text-decoration: underline;
  --rh-cta-focus-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
  --rh-cta-focus-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --rh-cta-focus-text-decoration: none;
  --rh-cta-active-background-color: var(--rh-color-surface-lighter, #f2f2f2);
  --rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  --rh-cta-active-text-decoration: underline;
}

[data-rh-theme^='dark'] rh-cta[variant='brick']:not(:defined),
[color-palette^='dark'] rh-cta[variant='brick']:not(:defined),
rh-cta[variant='brick'][color-palette^='dark']:not(:defined) {
  --rh-cta-border-color: var(--rh-color-border-subtle-on-dark, #707070);
  --rh-cta-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
  --rh-cta-hover-background-color: var(--rh-color-surface-darker, #1f1f1f);
  --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-dark, #707070);
  --rh-cta-hover-color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
  --rh-cta-hover-text-decoration: underline;
  --rh-cta-focus-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
  --rh-cta-focus-border-color: var(--rh-color-border-subtle-on-dark, #707070);
  --rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
  --rh-cta-focus-text-decoration: none;
  --rh-cta-active-background-color: var(--rh-color-surface-darker, #1f1f1f);
  --rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
  --rh-cta-active-text-decoration: underline;
}

rh-cta:not(:defined) * {
  display: inline !important;
  border: none !important;
  background-color: transparent !important;
  text-decoration: var(--rh-cta-text-decoration);
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

rh-cta:not(:defined) *:focus {
  outline: none !important;
}

rh-cta[variant]:not(:defined) * {
  padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important;
}

rh-cta[variant$='ary']:not(:defined) * {
  padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important;
}

rh-cta[variant='primary']:not(:defined) *:focus {
  outline:
    var(--rh-border-width-sm,
      1px) solid var(--rh-color-text-primary-on-dark,
      #ffffff) !important;
  outline-offset: -2px;
}