////
/// @group default-navigation-bar
////

/// Background color of page detail and menu boxes
$navigation-menu-box-background-color: $navigation-background-color !default;

/// Text color of page detail and menu boxes
$navigation-menu-box-text-color: #fff !default;

/// Transparency of page detail and menu boxes
$navigation-menu-box-opacity: $navigation-opacity !default;

/// Style of navigation menu boxes.
///
/// - `"triangle"`: Box without border and small triangle arrow at the right side
///
/// - `"border"`: Box with a border
$navigation-menu-box-style: "triangle" !default;

/// Width of border if `$navigation-menu-box-style` is `"border"`.
$navigation-menu-box-border-width: 2px !default;

/// Color of border if `$navigation-menu-box-style` is `"border"`.
$navigation-menu-box-border-color: #9c9c9c !default;

// Pictogram visibility.
$navigation-menu-box-pictogram-visibility: $standard-page-pictogram-visibility !default;

.navigation_site_detail,
.navigation_menu_box {
  color: $navigation-menu-box-text-color;
  background-color: $navigation-menu-box-background-color;
  background-image: $navigation-background-image;

  @if $navigation-menu-box-style == "border" {
    right: 90px;
    border: $navigation-menu-box-border-width solid $navigation-menu-box-border-color;
  } @else {
    right: 94px;

    &:before {
      content: "";
      display: block;
      position: absolute;
      left: 100%;
      @include triangle(16px, $navigation-menu-box-background-color, right);
    }
  }

  // Ensure element remains hovered even when cursor moves between
  // navigation bar and menu box.
  &:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 10px;
    height: 40px;
  }

  hr {
    border: 0;
    border-bottom: 1px solid $navigation-menu-box-text-color;
  }
}

.navigation_site_detail {
  .thumbnail {
    @if $navigation-menu-box-pictogram-visibility == visible {
      @extend %pageflow_page_type_thumbnail;
    }

    position: relative;
    width: 170px;
    height: 95px;
    margin-top: 12px;

    &:after {
      content: "";
      position: absolute;
      top: 28px;
      left: 66px;
      width: 38px;
      height: 38px;
      background-size: 76px 38px;
      background-repeat: no-repeat;
    }
  }

  &:before {
    top: 18px;
  }
}

.navigation_menu_box:before {
  bottom: 8px;
}