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

Red Hat Design System Elements

:where(rh-tile) {
  position: relative;
}

rh-tile a {
  color: var(--_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) {
  text-decoration: var(--rh-tile-link-text-decoration, underline) !important;
  text-decoration-color: inherit !important;
  text-decoration-style: dashed !important;
  text-decoration-thickness: var(--rh-border-width-sm, 1px) !important;
  text-underline-offset: max(5px, 0.28em) !important;
  transition-timing-function: ease !important;
  transition-property: text-underline-offset, color, text-decoration-color !important;
  transition-duration: 0.3s !important;
}

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

rh-tile[aria-disabled='true'] a {
  color:
    var(--_text-color-secondary,
      var(--rh-color-text-secondary)) !important;
}

rh-tile *:is([slot='image'], [slot='headline']) a {
  z-index: 1 !important;
  position: static !important;
  color: var(--_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(--_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) {
  width: 100%;
}

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

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