//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------

.nav {
   @include clearfix;

   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;

   > li {
      position: relative;
      display: block;

      > a {
         position: relative;
         display: block;
         padding: $nav-link-padding;

         &:hover,
         &:focus {
            text-decoration: none;
            background-color: $nav-link-hover-bg;
         }
      }

      // Disabled state sets text to gray and nukes hover/tab effects
      &.disabled > a {
         color: $nav-disabled-link-color;

         &:hover,
         &:focus {
            color: $nav-disabled-link-hover-color;
            text-decoration: none;
            background-color: transparent;
            cursor: $cursor-disabled;
         }
      }
   }

   // Open dropdowns
   .open > a {
      &,
      &:hover,
      &:focus {
         background-color: $nav-link-hover-bg;
         border-color: $link-color;
      }
   }

   // Nav dividers (deprecated with v3.0.1)
   //
   // This should have been removed in v3 with the dropping of `.nav-list`, but
   // we missed it. We don't currently support this anywhere, but in the interest
   // of maintaining backward compatibility in case you use it, it's deprecated.
   .nav-divider {
      @include nav-divider;
   }

   // Prevent IE8 from misplacing imgs
   //
   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
   > li > a > img {
      max-width: none;
   }
}


// Tabs
// -------------------------

// Give the tabs something to sit on
.nav-tabs {
   background-color: $nav-tabs-background;
   border-radius: $border-radius-base $border-radius-base 0 0;

   > li {
      border-left: 1px solid $nav-tabs-border-color;
      float: left;

      &:first-child {
         border-left: none;

         > a {
            border-radius: $border-radius-base 0 0 0;
         }
      }

      // Actual tabs (as links)
      > a {
         color: $nav-tabs-link-color;
         line-height: $line-height-base;

         &:hover,
         &:focus {
            background-color: $nav-tabs-hover-background;
         }
      }

      // Active state, and its :hover to override normal :hover
      &.active > a {
         &,
         &:hover,
         &:focus {
            color: $nav-tabs-link-color;
            background-color: $nav-tabs-active-link-hover-bg;
            cursor: default;
         }
      }
   }

   // zeleny nebo cerveny puntiky na editaci produktu
   li.error,
   li.success {
      position: relative;

      &::after {
         content: "";
         display: block;
         position: absolute;
         width: 10px;
         height: 10px;
         top: 50%;
         right: 10px;
         transform: translateY(-5px);
         border-radius: 50%;
         pointer-events: none;
      }
   }

   li.error::after {
      background-color: $danger;
   }

   li.success::after {
      background-color: $success;
   }
}


// Pills
// -------------------------
.nav-pills {
   > li {
      float: left;

      // Links rendered as pills
      > a {
         border-radius: $nav-pills-border-radius;
         color: $primary;

         &:hover {
            color: $darkgray-dark;
            background-color: $lightgray-dark;
         }
      }

      + li {
         margin-left: 2px;
      }

      // Active state
      &.active > a {
         &,
         &:hover,
         &:focus {
            color: $nav-pills-active-link-hover-color;
            background-color: $nav-pills-active-link-hover-bg;
         }
      }
   }

   > .active > a > .badge {
      color: $primary;
   }

   .open > a,
   .open > a:focus,
   .open > a:hover {
      color: $darkgray-dark;
      background-color: $lightgray-dark;
   }
}


// Stacked pills
.nav-stacked {
   > li {
      float: none;

      + li {
         margin-top: 2px;
         margin-left: 0; // no need for this gap between nav items
      }
   }
}


// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-justified {
   display: flex;
   width: 100%;

   > li {
      display: flex;
      flex-grow: 1;
      width: auto;

      > a {
         font-size: 12px;
         text-align: center;
         display: flex;
         align-items: center;
         justify-content: center;
         line-height: 1;
         padding: 14px 8px;
         width: 100%;
      }

      &:first-child > a {
         border-top-left-radius: $border-radius-base;
      }

      &:last-child > a {
         border-top-right-radius: $border-radius-base;
      }
   }

   > .dropdown .dropdown-menu {
      top: auto;
      left: auto;
   }

   .fc.icons_pin {
      color: $primary;
   }
}


// Tabbable tabs
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
   padding: 20px;

   > .tab-pane {
      display: none;
   }

   > .active {
      display: block;
   }
}


// Dropdowns
// -------------------------

// Specific dropdowns
.nav-tabs .dropdown-menu {
   // make dropdown border overlap tab border
   margin-top: -1px;
   // Remove the top rounded corners here since there is a hard edge above the menu
   @include border-top-radius(0);
}