//  Copyright (c) 2012-2013, Jungwacht Blauring Schweiz. This file is part of
//  hitobito and licensed under the Affero General Public License version 3
//  or later. See the COPYING file at the top-level directory or at
//  https://github.com/hitobito/hitobito.

/* Nav */
// -------------------------

/* Navigation */

.nav-sub {
  @include clearfix;
  line-height: 2.3;
  //font-family: $heading-font-family;
  border-bottom: 1px solid $border-color;
  clear: both;
  font-size: 0.938em;
  & > li {
    float: left;
    a {
      transition: border-color 300ms false false;
      padding: 8px 0;
      margin-top: 2px;
      margin-right: 30px;
      line-height: 14px;
      border-bottom: 2px solid transparent;
      &:hover {
        background: none;
        border-color: $gray-light;
      }
    }
  }
  & > .active > a {
    border-color: $blue;
  }
  & > .active > a:hover {
    border-color: $purple;
  }
}

.level {
  display: block;
  font-family: $heading-font-family;
  font-size: 1.5em !important;
  font-weight: bold;
  line-height: 1.25em;
  padding: 16px 20px 0 20px;
}

.level + .nav-sub {
  padding: 0 20px 0 20px;
  margin-bottom: 0;
  border-bottom: none;
  a {
    color: $gray;
    border: none;
  }
  .active a {
    color: $gray-darker;
  }
}

// Breadcrumb
.breadcrumb {
  float: right;
  margin: 5px 0 0;
  padding: 5px 10px;
  @include responsive(mediaTablet) {
    margin: 15px 0 0;
    padding: 5px 15px;
  }
  list-style: none;
  background: none;
  border: none;

  ul {
    margin: 0;
    li {
      color: $gray;
      display: inline-block;
      text-shadow: 0 1px 0 $white;

      a {
      }
    }
    li.divider {
      padding: 0 5px;
      color: $gray;
    }
  }
}

// Pagination
.pagination {
  @include clearfix;
  margin-top: 0;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
  color: $gray-dark;
}

.pagination ul > .disabled {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}

.pagination-bar {
  display: flex;
  justify-content: space-between;

  .pagination {
    margin-right: 20px;
    float: left;
  }

  .pagination-info {
    line-height: 20px;
    padding: 5px 0px;
  }

  .table-display-dropdown {
    margin-left: auto;
  }
}

// Pills
.nav-pills > li > a {
  padding-top: 7px;
  padding-bottom: 7px;
  border: 1px solid $gray-light;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
}

.nav-pills > .active > a {
  border-color: $blue;
}
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  background-color: $purple;
  border-color: $purple !important;
}

.nav-pills .open .dropdown-toggle,
.nav.nav-pills > li.dropdown.open.active > .dropdown-toggle {
  background-color: $purple;
  border-color: $purple;
}

.nav-pills .nav-link div {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.active > .dropdown > .dropdown-toggle {
  color: white;
}

.toolbar-pills {
  float: left;
  margin-right: 15px;
  .nav-pills {
    float: left;
  }
  li > a {
    margin-right: 0px;
  }
  & + .btn-toolbar {
    float: left;
  }
}
.group-pills > li {
  & > a {
    border-left: none;
    @include border-radius(0px);
    margin-right: 0;
  }
  &:first-child > a {
    @include border-start-radius(6px);
  }
  &:last-child > a {
    @include border-end-radius(6px);
    margin-right: 5px;
  }
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  background-color: $white;
}

// Dropdown
.btn-toolbar .dropdown-menu li {
  font-size: 14px;
  line-height: 20px;
}

.dropdown-menu > li.dropend > a:after {
  display: block;
  float: right;
  border-color: transparent transparent transparent #ccc;
  margin-top: 7px;
  margin-right: -7px;
}

.dropdown-menu li {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu > li:hover > .submenu {
  display: block;
}

.dropdown-menu > li:hover,
.dropdown-menu > li:focus,
.dropdown .dropend:hover > a,
.dropdown .dropend:focus > a {
  background: $purple;
  color: $white;
}

.nav-left a {
  width: 90%;
}
