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

Red Hat Design System Elements

rh-subnav {
  & rh-navigation-link:focus-visible:after,
  & rh-navigation-link:has(a:focus-visible):after {
    border-block-end-color: var(--rh-color-border-subtle) !important;
  }

  & rh-navigation-link:focus-within:after {
    border-block-end-color: var(--rh-color-border-subtle) !important;
  }

  & rh-navigation-link:active:after {
    border-block-end-color: var(--rh-color-brand-red) !important;
  }

  /* This will move to the shim file in the future */
  &:not(:defined) {
    block-size: 56px;
    display: flex;
    background-color: var(--rh-color-surface);

    & a {
      display: block !important;
      white-space: nowrap !important;
      padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px) !important;
      text-decoration: none !important;
      color: var(--rh-color-text-secondary) !important;
      position: relative !important;

      &:after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        inline-size: 100% !important;
        border-block-end: var(--rh-border-width-lg, 3px) solid transparent !important;
      }

      &:is([active], [aria-current='page']):after {
        border-block-end-color: var(--rh-color-accent-brand) !important;
      }
    }
  }
}