// "Product Version" Dropdown
.version-picker {
  padding: 5px 17px 10px;
  font-size: 12px;
}

.dropdown-wrapper {
  $dropdown-bg: lighten($chef-grey, 40%);
  $dropdown-border: 1px solid lighten($chef-grey, 10%);
  $dropdown-line-height: 27px;
  position: relative;
  background: $dropdown-bg;
  &.is-open .dropdown-items {
    display: block;
  }

  // Clickable area that wraps around current product version
  .dropdown-select {
    position: relative;
    width: 100%;
    padding-left: 5px;
    border: $dropdown-border;
    line-height: $dropdown-line-height;
    cursor: pointer;
    .fa-chevron-down {
      position: absolute;
      top: 0;
      right: 0;
      padding: 8px;
      border-left: $dropdown-border;
    }
  }

  // Wrapper for list of all products
  .dropdown-items {
    display: none;
    position: absolute;
    top: $dropdown-line-height + 1px;
    background: $dropdown-bg;
    border: $dropdown-border;
    z-index: 2;
    width: 100%;
    line-height: $dropdown-line-height;
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
    li {
      padding: 0 5px;
    }
    .dropdown-item:hover {
      background: darken($dropdown-bg, 10%);
    }
  }

  // .has-sub-items is applied to .dropdown-item when 
  // it has different product versions to choose from
  .has-sub-items {
    cursor: pointer;
    position: relative;
    &.is-open {
      background: darken($dropdown-bg, 10%);
      .fa-chevron-right {
        transform: rotate(180deg);
      }
    }
    .fa-chevron-right {
      position: absolute;
      top: 8px;
      right: 9px;
    }
    @media (min-width: $nav-breakpoint) {
      &:hover {
        .dropdown-sub-items {
          display: block;
        }
      }
    }
  }

  // Wrapper for different product versions list
  .dropdown-sub-items {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 4;
    background: $dropdown-bg;
    border: $dropdown-border;
    line-height: 21px;
    &.is-open {
      display: block;
    }
    @media (min-width: $nav-breakpoint) {
      top: 0;
      left: 100%;
      right: auto;
      width: 70px;
    }
    a {
      padding: 3px;
    }
  }

  // Heading for "Legacy Docs"
  .legacy-heading {
    background: lighten($chef-grey, 15%);
    color: $chef-white;
    font-weight: 700;
  }

  .legacy-item {
    background: darken($dropdown-bg, 5%);
    &:hover {
      background: darken($dropdown-bg, 15%);
    }
  }
}