/**
 * @file
 * Skin based on safe CSS file name: ultimenu--dark.
 */

.ultimenu--dark {
  color: #999;
  background-color: #222;
}

.ultimenu--dark .ultimenu__flyout {
  border-top: 1px solid #333;
  background-color: #111;
}

.ultimenu--dark .ultimenu__region {
  background-color: #222;
}

.ultimenu--dark .ultimenu__link {
  z-index: 103; /* Above the flyout z-index: 102 */
  color: #eaeaea;
  border-top: 1px solid transparent;
}

/* @todo is-active https://www.drupal.org/node/2281785 */
.ultimenu--dark .is-active-trail > a,
.ultimenu--dark > li:hover > a,
/** Unfortunaly is-active is unreliable, it goes on scroll/ ajax. */
.ultimenu--dark .is-ultimenu-active {
  color: #fff;
  border-top: 1px solid #444;
  background-color: #111;
}

/**
 * 944px below with 16px base font.
 */
@media all and (max-width: 58.999em) {
  .ultimenu--dark .ultimenu__link {
    border-top: 1px solid #333;
  }
}

/** 944px with 16px base font. */
@media only screen and (min-width: 59em) {
  .ultimenu--hover.ultimenu--dark li:hover > .ultimenu__flyout,
  .ultimenu--hover.ultimenu--dark li .ultimenu__flyout:focus-within,
  .ultimenu--hover.ultimenu--dark li a:focus + .ultimenu__flyout {
    margin-top: -1px;
  }
}