// =============================================================================
// _DROPDOWNS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Desktop Base Styles
//   02. Desktop Masthead Positioning: Inline
//   03. Desktop Masthead Positioning: Stacked
//   06. Portfolio Filters
// =============================================================================

// Desktop Base Styles
// =============================================================================

.desktop {
  .menu-item,
  .menu-item > a {
    position: relative;
  }

  .menu-item.x-active > .sub-menu {
    display: block;
  }

  .sub-menu {
    position: absolute;
    display: none;
    float: left;
    min-width: 200px;
    margin: 0;
    padding: $dropdownPadding;
    font-size: 12px;
    list-style: none;
    background-color: $dropdownBackground;
    z-index: $zindexDropdown;
    border-radius: 4px;
    @include background-clip(padding-box);
    box-shadow: $dropdownBoxShadow;

    a {
      display: block;
      clear: both;
      padding: $dropdownLinkPadding;
      line-height: $baseLineHeight;
      white-space: nowrap;
      color: $dropdownLinkColor;

      &:hover {
        text-decoration: none;
        color: $dropdownLinkColorHover;
        background-color: $dropdownLinkBackgroundHover;
      }
    }

    .x-active > a,
    .current-menu-item > a {
      background-color: $dropdownLinkBackgroundHover;
    }
  }
}



// Desktop Masthead Positioning: Inline
// =============================================================================

.masthead-inline {
  .x-navbar {
    .desktop .sub-menu {
      left: auto;
      right: 0;

      .sub-menu {
        top: $dropdownTop;
        right: $dropdownOffset;
      }
    }

    &.x-navbar-fixed-left {
      .desktop .sub-menu {
        top: 0;
        left: $dropdownFirstSide;
        right: auto;

        .sub-menu {
          top: $dropdownTop;
          left: $dropdownOffset;
          right: auto;
        }
      }
    }

    &.x-navbar-fixed-right {
      .desktop .sub-menu {
        top: 0;
        left: auto;
        right: $dropdownFirstSide;

        .sub-menu {
          top: $dropdownTop;
          left: auto;
          right: $dropdownOffset;
        }
      }
    }
  }
}



// Desktop Masthead Positioning: Stacked
// =============================================================================

.masthead-stacked {
  .x-navbar {
    .desktop .sub-menu {
      left: 0;
      right: auto;

      .sub-menu {
        top: $dropdownTop;
        left: $dropdownOffset;
      }
    }
  }
}



// Portfolio Filters
// =============================================================================

.x-portfolio-filters-menu {
  display: none;
}

.no-js .x-portfolio-filters-menu {
  display: block;
}