/**
 * @file
 * This file contains all Ultimenu vertical layout.
 */

/**
 * Orientation.
 * -vtr: vertical to right
 * -vtl: vertical to left
 * -htt: horizontal to top
 * -htb: horizontal to bottom
 */
.ultimenu--vertical {
  height: auto;
  z-index: 96;
}

.ultimenu--vertical > li {
  display: block;
  float: none;
  position: relative;
}

.ultimenu--vtr .ultimenu__flyout {
  left: 100%; /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
  left: auto;
  right: 100%;
}

.ultimenu--vtl .ultimenu__flyout {
  left: auto; /* LTR */
  right: 100%;  /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
  left: 100%;
  right: auto;
}

.ultimenu--vertical .ultimenu__link {
  padding: .5em 1em;
}

/**
 * 944px+ with 16px base font.
 */
@media all and (min-width: 59em) {
  .ultimenu--vtl .ultimenu__flyout {
    margin-right: 20px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
    margin-left: 20px;
    margin-right: auto;
  }

  .ultimenu--vtr .ultimenu__flyout {
    margin-left: 20px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
    margin-left: auto;
    margin-right: 20px;
  }

  .ultimenu--vtl li:hover .ultimenu__flyout {
    margin-right: 10px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtl li:hover .ultimenu__flyout {
    margin-left: 10px;
    margin-right: auto;
  }

  .ultimenu--vtr li:hover .ultimenu__flyout {
    margin-left: 10px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtr li:hover .ultimenu__flyout {
    margin-left: auto;
    margin-right: 10px;
  }
}