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) {
    &[slot='links'] {
      display: flex;
      align-items: center;
    }

    &[slot='event'] {
      &:hover {
        animation: rh-navigation-event-bounce 1s infinite;
      }
    }

    &:not([slot='links']) {
      /** Navigation item text color */
      color: var(--rh-color-text-primary) !important;

      & a {
        /** Navigation link font size */
        font-size: var(--rh-font-size-body-text-md, 1rem);
        /* stylelint-disable-next-line @stylistic/max-line-length */
        color: var(--rh-color-interactive-primary-default, light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc), var(--rh-color-interactive-primary-default-on-dark, #92c5f9))) !important;
        inline-size: 100%;
        text-decoration: none;

        &:hover {
          text-decoration:
            underline
            dashed
            /** Link hover decoration color */
            var(--rh-color-gray-50, #707070)
            /** Link hover decoration width */
            var(--rh-border-width-sm, 1px);
          transition-timing-function: ease;
          transition-property: text-underline-offset, color, text-decoration-color;
          transition-duration: 0.3s;
          text-underline-offset: max(6px, 0.33em);

          /** Link hover text color */
          color: var(--rh-color-interactive-primary-hover) !important;
        }
      }
    }
  }

  & 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:
        /** Navigation link separator width */
        var(--rh-border-width-sm, 1px)
        solid
        /** Navigation link separator color */
        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:
        /** Last navigation link separator width */
        var(--rh-border-width-sm, 1px)
        solid
        /** Last navigation link separator color */
        var(--rh-color-border-subtle);

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

@keyframes rh-navigation-event-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); /* Element is at its original position */
  }

  40% {
    transform: translateY(-10px); /* Element moves up 20px */
  }

  60% {
    transform: translateY(-5px); /* Element moves up 10px from original */
  }
}