/**
  * Component css variables are commented but NOT DEFINED here. They are defined in
  * the component's global scss file (e.g. src/global/components/_ojp-image.scss)
  * so that they can be used by other components and use globally set breakpoints.
  *
  **** NOTE: The @prop comments are necessary for public variables here because they
  **** will be picked up by Stencil's docs auto-generator and output to the component's
  **** docs at docs/components/<component-name>/readme.md
  ****
  **** Any comment changes here should be duplicated into the component's global scss file
  **** (e.g. src/global/components/_ojp-navigation-item.scss)
 */
/**
  * @prop --ojp-navigation-item--vertical-link-padding: Desktop menu link top/bottom padding. Defaults to `--space-s`
  * @prop --ojp-navigation-item--horizontal-link-padding: Desktop menu link left/right padding. Defaults to `--space-s`
  * @prop --ojp-navigation-item--font-size: Nav item font size. Defaults to `--step-3` at mobile and `--step-2` at desktop
  * @prop --ojp-navigation-item--link-hover-color: Link hover color. Defaults to `red`
*/
/**
 * Private Variable - set by JS according to props
 * --ojp-navigation-item--example-private-var: Description of this variable. Defaults to X.
*/
:host {
  display: inline-block;
  padding: var(--ojp-navigation-item--vertical-link-padding) var(--ojp-navigation-item--horizontal-link-padding);
}
:host ::slotted(a) {
  transition: color 0.1s ease-in-out;
  font-size: var(--ojp-navigation-item--font-size);
}
:host ::slotted(a):hover {
  color: var(--ojp-navigation-item--link-hover-color);
  text-decoration: underline;
}