@rhds/elements/rh-navigation-primary/rh-navigation-primary-lightdom.css

Red Hat Design System Elements

rh-navigation-primary {
  /* workaround for apparent regression in Safari 26.2 for containers defined on :host */
  container: navigation-primary / inline-size;

  & :is(rh-navigation-primary-item, rh-navigation-link) {
    color: var(--rh-color-text-primary) !important;

    & a {
      color: var(--rh-color-interactive-primary-default) !important;
      text-decoration: none;
      inline-size: 100%;

      @container navigation-primary (min-width: 1200px) {
        padding: 0 var(--rh-space-lg);
      }

      &:hover {
        color: var(--rh-color-interactive-primary-hover) !important;
      }
    }

    &[slot='event']::part(container) {
      padding: 0;
    }

    &[slot='links'] {
      display: flex;
      align-items: center;

      &:after {
        display: block;
        content: '';
        border-inline-end:
          var(--rh-border-width-sm, 1px)
          solid
          light-dark(var(--rh-color-gray-20, #e0e0e0), var(--rh-color-gray-60, #4d4d4d));
        height: 30px;
      }

      &:nth-child(1 of :is(rh-navigation-primary-item, rh-navigation-link)[slot='links']) {
        --_padding-inline-start: 0;
        --_navigation-link-container-padding: 0 8px 0 0;

        & a {
          margin-inline-start: 0;
        }
      }

      &:nth-last-child(1 of :is(rh-navigation-primary-item, rh-navigation-link)[slot='links']) {
        --_padding-inline-end: 0;
        --_navigation-link-container-padding: 0 0 0 8px;

        &:after {
          border-inline-end-color: transparent;
        }

        & a {
          margin-inline-end: 0;
        }
      }
    }
  }

  & rh-navigation-link {
    &:not([slot]) {
      --_navigation-link-container-inline-size: 100%;
      --_navigation-link-inline-size: 100%;

      display: flex;
      block-size: 100%;
      inline-size: 100%;
      border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);

      @container (min-width: 1200px) {
        --_navigation-link-container-inline-size: fit-content;
        --_navigation-link-container-display: inline-block;
        --_navigation-link-inline-size: fit-content;

        display: block;
        inline-size: fit-content;
        border-block-start: none;
      }
    }

    &:nth-last-child(1 of rh-navigation-link:not([slot])) {
      border-block-end: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle);

      @container (min-width: 1200px) {
        border-block-end: none;
      }
    }
  }
}