@rhds/elements/elements/rh-tile/rh-tile-lightdom.css

Red Hat Design System Elements

rh-tile a {
  color: var(--rh-tile-link-color) !important;
  text-decoration: var(--rh-tile-link-text-decoration, none) !important;
}

rh-tile:focus-within a,
rh-tile a:is(:focus, :hover, :active) {
  --rh-tile-link-text-decoration: underline;
}

rh-tile a:not([slot="image"], [slot="headline"]) {
  z-index: 2 !important;
  position: relative !important;
}

rh-tile[aria-disabled="true"] a {
  color:
    var(
        --rh-tile-text-color-secondary,
        var(--rh-color-text-secondary-on-light, #4d4d4d)
      ) !important;
}

rh-tile *:is([slot="image"], [slot="headline"]) a,
rh-tile a:is([slot="image"], [slot="headline"]) {
  z-index: 1 !important;
  position: static !important;
  color: var(--rh-tile-link-color) !important;
}

rh-tile *:is([slot="image"], [slot="headline"]) a:after,
rh-tile a:is([slot="image"], [slot="headline"]):after {
  content: "";
  position: absolute;
  inset: 0;
  display: var(--rh-tile-link-after-display);
}

rh-tile [slot="headline"] a:after,
rh-tile a[slot="headline"]:after {
  z-index: 3;
}

rh-tile a[slot="image"] > :is(img, svg),
rh-tile [slot="image"]:is(img, svg) {
  width: 100%;
}

rh-tile:defined a:is(:focus, :hover, :active) {
  outline: var(--rh-tile-link-outline) !important;
}

rh-tile:defined :is([slot="image"], [slot="headline"]) a,
rh-tile:defined a:is([slot="image"], [slot="headline"]) {
  --rh-tile-link-outline: none;
}