/**
 * @file
 * Provides .ultimenu__link styles.
 */

/* Add "position: relative;" to make flyout relative to LI for smaller flyout */
.ultimenu > li {
  display: block;
  margin: 0;
  word-wrap: break-word;
}

.ultimenusub .is-uitem-expanded {
  background-color: var(--ultisub-expanded);
}

.ultimenusub .is-uitem-expanded .is-uitem-expanded {
  background-color: var(--ultisub2-expanded);
}

.ultimenusub .is-uitem-collapsible > ul {
  padding: 0 var(--ultispace);
}

.ultimenusub .is-uitem-collapsible.is-uitem-expanded > ul {
  margin: 0;
  padding: var(--ultispace);
}

/**
 * Link item may or may not have A tag given <nolink>.
 */
.ultimenu__link {
  padding: 10px var(--ultispace);
}

.ultimenu .ultimenu__link {
  position: relative;
  /* To hold arrows for small device */
  display: block;
  transition: background-color 0.5s, color 0.5s;
  text-decoration: none;
  line-height: 1.6;
}

.ultimenu > li > .ultimenu__link {
  z-index: 103;
  /* Above the flyout z-index: 102 */
}

/* Without direct decendants > to be inherited as needed. */
.ultimenu li .ultimenu__link {
  color: var(--ultilink-normal);
}

.ultimenu li .ultimenu__link:hover,
.ultimenu li .ultimenu__link:active,
.ultimenu li .is-ulink-active {
  color: var(--ultilink-active);
}

/* With direct decendants > to avoid submenus from inheritance. */
.ultimenu > li > .ultimenu__link {
  background-color: var(--ultilink-bg-normal);
}

.ultimenu > li > .ultimenu__link:hover {
  background-color: var(--ultilink-bg-hover);
}

.ultimenu > li > .ultimenu__link:active,
.ultimenu > li:hover > .ultimenu__link {
  background-color: var(--ultilink-bg-active);
}

.ultimenu > .is-active-trail > .ultimenu__link

/* ,
.ultimenu > li:hover > .ultimenu__link,
.ultimenu > li > .is-ulink-active */ {
  color: var(--ultilink-active);
}

/* Submenus. */
.ultimenusub .menu > li > a {
  color: var(--ultisub-normal);
}

.ultimenusub .menu > li > a:hover,
.ultimenusub .menu > li > a:active,
.ultimenusub .menu > li > .is-ulink-active {
  color: var(--ultisub-active);
}

/* Collapsible submenus. */
.ultimenusub .is-uitem-expanded > .menu > li > a {
  color: var(--ultisub2-normal);
}

.ultimenusub .is-uitem-expanded > a,
.ultimenusub .is-uitem-expanded > .menu > li > a:hover,
.ultimenusub .is-uitem-expanded > .menu > li > a:active,
.ultimenusub .is-uitem-expanded > .menu > li > .is-ulink-active {
  color: var(--ultisub2-active);
}

/**
 * We are here at desktop up.
 * 1025px = 64.063em with 16px base font, assumes no-touch devices.
 * These rules should work without javascript.
 * Generic rules for all Ultimenu flyout being hovered.
 * Hover can disabled for carets via Use caret option at blocks since 3.0.3.
 */

/**
 * When hamburger is gone, or hover, basically to merge backgrounds.
 */
.ultimenu .is-uitem-expanded > .ultimenu__flyout,
.ultimenu li:hover > .ultimenu__flyout,
.ultimenu li .ultimenu__flyout:focus-within,
.ultimenu li a:focus + .ultimenu__flyout {
  margin-top: -1px;
}
