<commit_before>// Set file variable
$filename: 'scss/blocks/_dropdowns.scss';

////////////////////////////////////////////////////////////////////////////////
// @Dropdowns Map
////////////////////////////////////////////////////////////////////////////////

$dropdowns: (
  'classes' : true,
) !default;

// Check if we should output modifier classes
@if (map-get($dropdowns, 'classes') == true) {

/*==============================================================================
  @Dropdowns - #{$filename}
==============================================================================*/

// To-do
// 1) Add method support for dropdown trigger (on-hover, on-click)
// 2) Add size modifiers (width of the dropdown)
// 3) Create mixins, variables for dropdowns
// 4) Explore an option to add inheritable midifier classes.
//    (e.g. all-arrow, all-expanded, etc...)

// Issues
// 1) When changing direction of nested dropdown menus, you currently cannot
//    also change orientation of arrows.

/**
 * General Dropdown Styles
 */
.dropdown,
.dropdown-content,
.dropdown-menu {
  position: relative;
  display: block;
  margin: 0;
  font-size: px-to-rem(14px);
  line-height: 1.25em;
  background: $white;
  background-clip: padding-box;
  border: 1px solid rgba($black, 0.1);
  box-shadow: 0 2px 6px rgba($black, 0.15);
  @include border-radius();
  
  width: 15rem;
  
  &.size-small,
  &.all-size-small {
    width: 10rem;
  }
  &.all-size-small {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 10rem;
    }
  }
  
  &.size-large,
  &.all-size-large {
    width: 20rem;
  }
  &.all-size-large {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 20rem;
    }
  }
  
  &.size-fluid,
  &.all-size-fluid  {
    width: 100%;
  }
  &.all-size-fluid {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 100%;
    }
  }
}

/* Inverted General Dropdown Styles */
.dropdown.inverted,
.dropdown-content.inverted,
.dropdown-menu.inverted {
  color: $white;
  background: $color;
  border: 1px solid transparent;
  
  a {
    border-color: rgba($white, 0.1);
    &:hover {
      border-color: rgba($white, 0.25);
    }
  }
}

/**
 * Dropdown
 */
.dropdown {
  padding: 0;
  
  > .dropdown-content,
  > .dropdown-menu {
    width: auto;
    margin: 0;
    background: none;
    border: 0 none;
    border-top: 1px solid rgba($black, 0.1);
    box-shadow: none;
    @include border-radius(0);
    
    &:first-child {
      border-top: 0 none;
      @include border-radius-top();
    }
    &:last-child {
      @include border-radius-bottom();
    }
  }
}

/* Inverted Dropdown Styles */
.dropdown.inverted {
  > .dropdown-content,
  > .dropdown-menu {
    border: 0 none;
    border-top: 1px solid rgba($white, 0.1);
    
    &:first-child {
      border-top: 0 none;
    }
  }
}

/**
 * Dropdown Content
 */
.dropdown-content {
  padding: 1em;
  
  > * {
    margin: 0.5em 0;
  }
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
  
  // Condensed Padding Modifiers
  &.condensed {
    padding: 0.5em;
    
    > a.block {
      @include border-radius(0);
    }
    &:first-child > a.block {
      @include border-radius-top();
    }
    &:last-child > a.block {
      @include border-radius-bottom();
    }
  }
  &.all-condensed {
    padding: 0.5em;
    
    > a.block {
      @include border-radius(0);
    }
    &:first-child > a.block {
      @include border-radius-top();
    }
    &:last-child > a.block {
      @include border-radius-bottom();
    }
    
    .dropdown-content {
      padding: 0.5em;
      
      > a.block {
        @include border-radius(0);
      }
      &:first-child > a.block {
        @include border-radius-top();
      }
      &:last-child > a.block {
        @include border-radius-bottom();
      }
    }
    .dropdown-menu {
      padding: 0;
    }
  }
  
  // Expanded Padding Modifiers
  &.expanded {
    padding: 1.5em;
  }
  &.all-expanded {
    padding: 1.5em;
    
    .dropdown-content {
      padding: 1.5em;
    }
    .dropdown-menu {
      padding: 1em;
    }
  }
  
  // Block Links
  > a.block {
    display: block;
    margin: -0.5em;
    padding: 1em;
    color: $color;
    border: 0 none;
    @include border-radius();
    
    &:hover {
      background: rgba($black, 0.05);
    }
    
    > * {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    > :first-child {
      margin-top: 0;
    }
    > :last-child {
      margin-bottom: 0;
    }
  }
}

/* Inverted Dropdown Content */
.dropdown.inverted > .dropdown-content,
.dropdown-content.inverted {
  > a.block {
    color: $white;
    
    &:hover {
      background: rgba($white, 0.05);
    }
  }
}

/**
 * Dropdown Menu
 */
.dropdown-menu {
  list-style: none;
  padding: 0.5em;
  
  // Condensed Padding Modifiers
  &.condensed {
    padding: 0;
  }
  &.all-condensed {
    padding: 0;
    .dropdown-content {
      padding: 0.5em;
    }
    .dropdown-menu {
      padding: 0;
    }
  }
  
  // Expanded Padding Modifiers
  &.expanded {
    padding: 1em;
  }
  &.all-expanded {
    padding: 1em;
    .dropdown-content {
      padding: 1.5em;
    }
    .dropdown-menu {
      padding: 1em;
    }
  }
  
  // Dropdown Menu Items
  li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid rgba($black, 0.1);
    @include transition(background-color 0.25s linear);
  }
  li:hover {
    background: rgba($black, 0.05);
    background-clip: padding-box;
  }
  li:first-child {
    @include border-radius-top();
  }
  li:last-child {
    border-bottom: 0 none;
    @include border-radius-bottom();
  }
    
  li a {
    display: block;
    padding: 0.75em 1em;
    color: $color;
    border: 0 none;
  }
}

/* Inverted Dropdown Menu */
.dropdown.inverted > .dropdown-menu,
.dropdown-menu.inverted {
  > li {
    border-color: rgba($white, 0.1);
  }
  > li:hover {
    background: rgba($white, 0.05);
  }
  > li > a {
    color: $white;
  }
}

/*==============================================================================
  @Dropdown Triggers - #{$filename}
==============================================================================*/

/**
 * Dropdown Trigger
 */
.dropdown-trigger {
  position: relative;
  display: inline-block;
  
  .dropdown {
    position: absolute;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    @include transition( transform, opacity, visibility );
    @include transition-duration(0.25s, 0.25s, 0.15s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(0.25s);
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    z-index: 105;
    opacity: 1;
    visibility: visible;
    @include transition( transform, opacity, visibility);
    @include transition-duration(0.25s, 0.25s, 0.25s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(none);
  }
  
  // Default position
  .dropdown {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, -1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown .dropdown-trigger {
  display: block;
}

/**
 * Dropdown Menu Trigger
 */
.dropdown-menu {
  .dropdown-menu {
    position: absolute;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    @include transition( transform, opacity, visibility );
    @include transition-duration(0.25s, 0.25s, 0.15s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(0.25s);
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    z-index: 105;
    opacity: 1;
    visibility: visible;
    @include transition( transform, opacity, visibility);
    @include transition-duration(0.25s, 0.25s, 0.25s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(none);
  }
  
  // Default position
  .dropdown-menu {
    margin: -1px 0 0 0;
    top: -0.5em;
    left: 100%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}

/*==============================================================================
  @Dropdown Anchor Positions - #{$filename}
==============================================================================*/

/**
 * Top and Bottom Anchors
 */
.anchor-top-left,
.anchor-top-right,
.anchor-top-center {
  .dropdown {
    margin: 0 0 -1px 0;
    top: auto;
    bottom: 100%;
    @include transform(translate3d(0, 1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: auto;
    bottom: 100%;
    @include transform(translate3d(0, 0, 0));
  }
}
.anchor-bottom-left,
.anchor-bottom-right,
.anchor-bottom-center {
  .dropdown {
    margin: -1px 0 0 0;
    top: 100%;
    bottom: auto;
    @include transform(translate3d(0, -1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 100%;
    bottom: auto;
    @include transform(translate3d(0, 0, 0));
  }
}

.anchor-top-left,
.anchor-bottom-left {
  .dropdown {
    left: 0;
    right: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 0;
    right: auto;
  }
}
.anchor-top-right,
.anchor-bottom-right {
  .dropdown {
    left: auto;
    right: 0;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: auto;
    right: 0;
  }
}
.anchor-top-center,
.anchor-bottom-center {
  .dropdown {
    left: 50%;
    right: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 50%;
    right: auto;
    @include transform(translate3d(-50%, 0, 0));
  }
}

.anchor-top-center {
  .dropdown {
    @include transform(translate3d(-50%, 1em, 0));
  }
}
.anchor-bottom-center {
  .dropdown {
    @include transform(translate3d(-50%, -1em, 0));
  }
}

/**
 * Left and Right Anchors
 */
.anchor-left-top,
.anchor-left-bottom,
.anchor-left-center {
  .dropdown {
    margin: 0 -1px 0 0;
    left: auto;
    right: 100%;
    @include transform(translate3d(1em, 0, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: auto;
    right: 100%;
    @include transform(translate3d(0, 0, 0));
  }
  
}
.anchor-right-top,
.anchor-right-bottom,
.anchor-right-center {
  .dropdown {
    margin: 0 0 0 -1px;
    left: 100%;
    right: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 100%;
    right: auto;
    @include transform(translate3d(0, 0, 0));
  }
}

.anchor-left-top,
.anchor-right-top {
  .dropdown {
    top: 0;
    bottom: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 0;
    bottom: auto;
  }
}
.anchor-left-bottom,
.anchor-right-bottom {
  .dropdown {
    top: auto;
    bottom: 0;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: auto;
    bottom: 0;
  }
}
.anchor-left-center,
.anchor-right-center {
  .dropdown {
    top: 50%;
    bottom: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 50%;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}
.anchor-left-center {
  .dropdown {
    @include transform(translate3d(-1em, -50%, 0));
  }
}
.anchor-right-center  {
  .dropdown {
    @include transform(translate3d(1em, -50%, 0));
  }
}

/**
 * Dropdown Menu Anchor Positions
 */
.dropdown-menu.anchor-left-top,
.dropdown-menu.anchor-left-bottom,
.dropdown-menu.anchor-left-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    left: auto;
    right: 100%;
    @include transform(translate3d(1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown-menu.anchor-right-top,
.dropdown-menu.anchor-right-bottom,
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    left: 100%;
    right: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown-menu.anchor-left-top,
.dropdown-menu.anchor-right-top {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: -1px 0 0 0;
    top: -0.5em;
    bottom: auto;
  }
}
.dropdown-menu.anchor-left-bottom,
.dropdown-menu.anchor-right-bottom {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: 0 0 -1px 0;
    top: auto;
    bottom: -0.5em;
  }
}
.dropdown-menu.anchor-left-center,
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: 0;
    top: 50%;
    bottom: auto;
  }
}
.dropdown-menu.anchor-left-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    @include transform(translate3d(1em, -50%, 0));
  }
  li:hover > .dropdown-menu,
  &.active li > .dropdown-menu {
    @include transform(translate3d(0, -50%, 0));
  }
}
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    @include transform(translate3d(-1em, -50%, 0));
  }
  li:hover > .dropdown-menu,
  &.active li > .dropdown-menu {
    @include transform(translate3d(0, -50%, 0));
  }
}


/*==============================================================================
  @Dropdown Arrows - #{$filename}
==============================================================================*/

/**
 * Base Arrow
 */
.dropdown.arrow,
.dropdown-menu.arrow {
  &:before,
  &:after {
    @include make-triangle-base();
    position: absolute;
  }
}

.dropdown.arrow {
  // Default Arrow Position
  &:before,
  &:after {
    top: auto;
    left: 1.5em;
    right: auto;
    bottom: 100%;
  }
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'up' );
    margin: 0 0 1px 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'up' );
  }
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'up' ); }
    &:after  { @include make-triangle( 7px, $color, 'up' ); }
  }
}

.dropdown-menu.arrow {
  // Default Arrow Position
  &:before,
  &:after {
    top: 1.2em;
    left: auto;
    right: 100%;
    bottom: auto;
  }
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'left' );
    margin: 0 1px 0 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'left' );
  }
  
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'left' ); }
    &:after  { @include make-triangle( 7px, $color, 'left' ); }
  }
}

/**
 * Arrow Up
 */
.anchor-bottom-left .dropdown.arrow,
.anchor-bottom-right .dropdown.arrow,
.anchor-bottom-center .dropdown.arrow {
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'up' );
    margin: 0 0 1px 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'up' );
  }
  
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'up' ); }
    &:after  { @include make-triangle( 7px, $color, 'up' ); }
  }
}

.anchor-bottom-left .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: 1.5em;
    right: auto;
    bottom: 100%;
  }
}
.anchor-bottom-right .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: auto;
    right: 1.5em;
    bottom: 100%;
  }
}
.anchor-bottom-center .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 100%;
    @include transform(translate3d(-50%, 0, 0));
  }
}

/**
 * Arrow Down
 */
.anchor-top-left .dropdown.arrow,
.anchor-top-right .dropdown.arrow,
.anchor-top-center .dropdown.arrow {
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'down' );
    margin: 1px 0 0 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'down' );
  }
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'down' ); }
    &:after  { @include make-triangle( 7px, $color, 'down' ); }
  }
}

.anchor-top-left .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: 1.5em;
    right: auto;
    bottom: auto;
  }
}
.anchor-top-right .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: auto;
    right: 1.5em;
    bottom: auto;
  }
}
.anchor-top-center .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(-50%, 0, 0));
  }
}

/**
 * Arrow Right
 */
.anchor-left-top,
.anchor-left-bottom,
.anchor-left-center {
  
  .dropdown.arrow,
  .dropdown-menu.arrow {
    &:before {
      @include make-triangle( 7px, rgba($black, 0.25), 'right' );
      margin: 0 0 0 1px;
    }
    &:after {
      @include make-triangle( 7px, $white, 'right' );
    }
    &.inverted {
      &:before { @include make-triangle( 7px, $color, 'right' ); }
      &:after  { @include make-triangle( 7px, $color, 'right' ); }
    }
  }
}

.anchor-left-top .dropdown.arrow,
.anchor-left-top .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 1.2em;
    left: 100%;
    right: auto;
    bottom: auto;
  }
}
.anchor-left-bottom .dropdown.arrow,
.anchor-left-bottom .dropdown-menu.arrow {
  &:before,
  &:after {
    top: auto;
    left: 100%;
    right: auto;
    bottom: 1.2em;
  }
}
.anchor-left-center .dropdown.arrow,
.anchor-left-center .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 50%;
    left: 100%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}

/**
 * Arrow Left
 */
.anchor-right-top,
.anchor-right-bottom,
.anchor-right-center {
  
  .dropdown.arrow,
  .dropdown-menu.arrow {
    &:before {
      @include make-triangle( 7px, rgba($black, 0.25), 'left' );
      margin: 0 1px 0 0;
    }
    &:after {
      @include make-triangle( 7px, $white, 'left' );
    }
    &.inverted {
      &:before { @include make-triangle( 7px, $color, 'left' ); }
      &:after  { @include make-triangle( 7px, $color, 'left' ); }
    }
  }
}

.anchor-right-top .dropdown.arrow,
.anchor-right-top .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 1.2em;
    left: auto;
    right: 100%;
    bottom: auto;
  }
}
.anchor-right-bottom .dropdown.arrow,
.anchor-right-bottom .dropdown-menu.arrow {
  &:before,
  &:after {
    top: auto;
    left: auto;
    right: 100%;
    bottom: 1.2em;
  }
}
.anchor-right-center .dropdown.arrow,
.anchor-right-center .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 50%;
    left: auto;
    right: 100%;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}

} // endif classes
<commit_msg>Added the new dropdown mixins<commit_after>// Set file variable
$filename: 'scss/blocks/_dropdowns.scss';

////////////////////////////////////////////////////////////////////////////////
// @Dropdowns Map
////////////////////////////////////////////////////////////////////////////////

$dropdowns: (
  'classes' : true,
) !default;

////////////////////////////////////////////////////////////////////////////////
// @Dropdown Mixins
////////////////////////////////////////////////////////////////////////////////

@mixin make-dropdown($options: ()) {
  $o: map-merge($dropdowns, $options);
  
  
}

@mixin make-dropdown-trigger($options: ()) {
  $o: map-merge($dropdowns, $options);
  
  
}

@mixin add-dropdown-style($options: ()) {
  $o: map-merge($dropdowns, $options);
  
  
}

@mixin add-dropdown-position($options: ()) {
  $o: map-merge($dropdowns, $options);
  
  
}

@mixin add-dropdown-arrow($options: ()) {
  $o: map-merge($dropdowns, $options);
  
  
}

// Check if we should output modifier classes
@if (map-get($dropdowns, 'classes') == true) {

/*==============================================================================
  @Dropdowns - #{$filename}
==============================================================================*/

// To-do
// 1) Add method support for dropdown trigger (on-hover, on-click)
// 2) Add size modifiers (width of the dropdown)
// 3) Create mixins, variables for dropdowns
// 4) Explore an option to add inheritable midifier classes.
//    (e.g. all-arrow, all-expanded, etc...)

// Issues
// 1) When changing direction of nested dropdown menus, you currently cannot
//    also change orientation of arrows.

/**
 * General Dropdown Styles
 */
.dropdown,
.dropdown-content,
.dropdown-menu {
  position: relative;
  display: block;
  margin: 0;
  font-size: px-to-rem(14px);
  line-height: 1.25em;
  background: $white;
  background-clip: padding-box;
  border: 1px solid rgba($black, 0.1);
  box-shadow: 0 2px 6px rgba($black, 0.15);
  @include border-radius();
  
  width: 15rem;
  
  &.size-small,
  &.all-size-small {
    width: 10rem;
  }
  &.all-size-small {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 10rem;
    }
  }
  
  &.size-large,
  &.all-size-large {
    width: 20rem;
  }
  &.all-size-large {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 20rem;
    }
  }
  
  &.size-fluid,
  &.all-size-fluid  {
    width: 100%;
  }
  &.all-size-fluid {
    .dropdown,
    .dropdown-content,
    .dropdown-menu {
      width: 100%;
    }
  }
}

/* Inverted General Dropdown Styles */
.dropdown.inverted,
.dropdown-content.inverted,
.dropdown-menu.inverted {
  color: $white;
  background: $color;
  border: 1px solid transparent;
  
  a {
    border-color: rgba($white, 0.1);
    &:hover {
      border-color: rgba($white, 0.25);
    }
  }
}

/**
 * Dropdown
 */
.dropdown {
  padding: 0;
  
  > .dropdown-content,
  > .dropdown-menu {
    width: auto;
    margin: 0;
    background: none;
    border: 0 none;
    border-top: 1px solid rgba($black, 0.1);
    box-shadow: none;
    @include border-radius(0);
    
    &:first-child {
      border-top: 0 none;
      @include border-radius-top();
    }
    &:last-child {
      @include border-radius-bottom();
    }
  }
}

/* Inverted Dropdown Styles */
.dropdown.inverted {
  > .dropdown-content,
  > .dropdown-menu {
    border: 0 none;
    border-top: 1px solid rgba($white, 0.1);
    
    &:first-child {
      border-top: 0 none;
    }
  }
}

/**
 * Dropdown Content
 */
.dropdown-content {
  padding: 1em;
  
  > * {
    margin: 0.5em 0;
  }
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
  
  // Condensed Padding Modifiers
  &.condensed {
    padding: 0.5em;
    
    > a.block {
      @include border-radius(0);
    }
    &:first-child > a.block {
      @include border-radius-top();
    }
    &:last-child > a.block {
      @include border-radius-bottom();
    }
  }
  &.all-condensed {
    padding: 0.5em;
    
    > a.block {
      @include border-radius(0);
    }
    &:first-child > a.block {
      @include border-radius-top();
    }
    &:last-child > a.block {
      @include border-radius-bottom();
    }
    
    .dropdown-content {
      padding: 0.5em;
      
      > a.block {
        @include border-radius(0);
      }
      &:first-child > a.block {
        @include border-radius-top();
      }
      &:last-child > a.block {
        @include border-radius-bottom();
      }
    }
    .dropdown-menu {
      padding: 0;
    }
  }
  
  // Expanded Padding Modifiers
  &.expanded {
    padding: 1.5em;
  }
  &.all-expanded {
    padding: 1.5em;
    
    .dropdown-content {
      padding: 1.5em;
    }
    .dropdown-menu {
      padding: 1em;
    }
  }
  
  // Block Links
  > a.block {
    display: block;
    margin: -0.5em;
    padding: 1em;
    color: $color;
    border: 0 none;
    @include border-radius();
    
    &:hover {
      background: rgba($black, 0.05);
    }
    
    > * {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    > :first-child {
      margin-top: 0;
    }
    > :last-child {
      margin-bottom: 0;
    }
  }
}

/* Inverted Dropdown Content */
.dropdown.inverted > .dropdown-content,
.dropdown-content.inverted {
  > a.block {
    color: $white;
    
    &:hover {
      background: rgba($white, 0.05);
    }
  }
}

/**
 * Dropdown Menu
 */
.dropdown-menu {
  list-style: none;
  padding: 0.5em;
  
  // Condensed Padding Modifiers
  &.condensed {
    padding: 0;
  }
  &.all-condensed {
    padding: 0;
    .dropdown-content {
      padding: 0.5em;
    }
    .dropdown-menu {
      padding: 0;
    }
  }
  
  // Expanded Padding Modifiers
  &.expanded {
    padding: 1em;
  }
  &.all-expanded {
    padding: 1em;
    .dropdown-content {
      padding: 1.5em;
    }
    .dropdown-menu {
      padding: 1em;
    }
  }
  
  // Dropdown Menu Items
  li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid rgba($black, 0.1);
    @include transition(background-color 0.25s linear);
  }
  li:hover {
    background: rgba($black, 0.05);
    background-clip: padding-box;
  }
  li:first-child {
    @include border-radius-top();
  }
  li:last-child {
    border-bottom: 0 none;
    @include border-radius-bottom();
  }
    
  li a {
    display: block;
    padding: 0.75em 1em;
    color: $color;
    border: 0 none;
  }
}

/* Inverted Dropdown Menu */
.dropdown.inverted > .dropdown-menu,
.dropdown-menu.inverted {
  > li {
    border-color: rgba($white, 0.1);
  }
  > li:hover {
    background: rgba($white, 0.05);
  }
  > li > a {
    color: $white;
  }
}

/*==============================================================================
  @Dropdown Triggers - #{$filename}
==============================================================================*/

/**
 * Dropdown Trigger
 */
.dropdown-trigger {
  position: relative;
  display: inline-block;
  
  .dropdown {
    position: absolute;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    @include transition( transform, opacity, visibility );
    @include transition-duration(0.25s, 0.25s, 0.15s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(0.25s);
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    z-index: 105;
    opacity: 1;
    visibility: visible;
    @include transition( transform, opacity, visibility);
    @include transition-duration(0.25s, 0.25s, 0.25s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(none);
  }
  
  // Default position
  .dropdown {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, -1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown .dropdown-trigger {
  display: block;
}

/**
 * Dropdown Menu Trigger
 */
.dropdown-menu {
  .dropdown-menu {
    position: absolute;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    @include transition( transform, opacity, visibility );
    @include transition-duration(0.25s, 0.25s, 0.15s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(0.25s);
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    z-index: 105;
    opacity: 1;
    visibility: visible;
    @include transition( transform, opacity, visibility);
    @include transition-duration(0.25s, 0.25s, 0.25s);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(none);
  }
  
  // Default position
  .dropdown-menu {
    margin: -1px 0 0 0;
    top: -0.5em;
    left: 100%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}

/*==============================================================================
  @Dropdown Anchor Positions - #{$filename}
==============================================================================*/

/**
 * Top and Bottom Anchors
 */
.anchor-top-left,
.anchor-top-right,
.anchor-top-center {
  .dropdown {
    margin: 0 0 -1px 0;
    top: auto;
    bottom: 100%;
    @include transform(translate3d(0, 1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: auto;
    bottom: 100%;
    @include transform(translate3d(0, 0, 0));
  }
}
.anchor-bottom-left,
.anchor-bottom-right,
.anchor-bottom-center {
  .dropdown {
    margin: -1px 0 0 0;
    top: 100%;
    bottom: auto;
    @include transform(translate3d(0, -1em, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 100%;
    bottom: auto;
    @include transform(translate3d(0, 0, 0));
  }
}

.anchor-top-left,
.anchor-bottom-left {
  .dropdown {
    left: 0;
    right: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 0;
    right: auto;
  }
}
.anchor-top-right,
.anchor-bottom-right {
  .dropdown {
    left: auto;
    right: 0;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: auto;
    right: 0;
  }
}
.anchor-top-center,
.anchor-bottom-center {
  .dropdown {
    left: 50%;
    right: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 50%;
    right: auto;
    @include transform(translate3d(-50%, 0, 0));
  }
}

.anchor-top-center {
  .dropdown {
    @include transform(translate3d(-50%, 1em, 0));
  }
}
.anchor-bottom-center {
  .dropdown {
    @include transform(translate3d(-50%, -1em, 0));
  }
}

/**
 * Left and Right Anchors
 */
.anchor-left-top,
.anchor-left-bottom,
.anchor-left-center {
  .dropdown {
    margin: 0 -1px 0 0;
    left: auto;
    right: 100%;
    @include transform(translate3d(1em, 0, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: auto;
    right: 100%;
    @include transform(translate3d(0, 0, 0));
  }
  
}
.anchor-right-top,
.anchor-right-bottom,
.anchor-right-center {
  .dropdown {
    margin: 0 0 0 -1px;
    left: 100%;
    right: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    left: 100%;
    right: auto;
    @include transform(translate3d(0, 0, 0));
  }
}

.anchor-left-top,
.anchor-right-top {
  .dropdown {
    top: 0;
    bottom: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 0;
    bottom: auto;
  }
}
.anchor-left-bottom,
.anchor-right-bottom {
  .dropdown {
    top: auto;
    bottom: 0;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: auto;
    bottom: 0;
  }
}
.anchor-left-center,
.anchor-right-center {
  .dropdown {
    top: 50%;
    bottom: auto;
  }
  &:not(.on-click):hover > .dropdown,
  &.active > .dropdown {
    top: 50%;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}
.anchor-left-center {
  .dropdown {
    @include transform(translate3d(-1em, -50%, 0));
  }
}
.anchor-right-center  {
  .dropdown {
    @include transform(translate3d(1em, -50%, 0));
  }
}

/**
 * Dropdown Menu Anchor Positions
 */
.dropdown-menu.anchor-left-top,
.dropdown-menu.anchor-left-bottom,
.dropdown-menu.anchor-left-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    left: auto;
    right: 100%;
    @include transform(translate3d(1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown-menu.anchor-right-top,
.dropdown-menu.anchor-right-bottom,
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    left: 100%;
    right: auto;
    @include transform(translate3d(-1em, 0, 0));
  }
  > li:hover > .dropdown-menu,
  &.active > li > .dropdown-menu {
    @include transform(translate3d(0, 0, 0));
  }
}
.dropdown-menu.anchor-left-top,
.dropdown-menu.anchor-right-top {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: -1px 0 0 0;
    top: -0.5em;
    bottom: auto;
  }
}
.dropdown-menu.anchor-left-bottom,
.dropdown-menu.anchor-right-bottom {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: 0 0 -1px 0;
    top: auto;
    bottom: -0.5em;
  }
}
.dropdown-menu.anchor-left-center,
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    margin: 0;
    top: 50%;
    bottom: auto;
  }
}
.dropdown-menu.anchor-left-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    @include transform(translate3d(1em, -50%, 0));
  }
  li:hover > .dropdown-menu,
  &.active li > .dropdown-menu {
    @include transform(translate3d(0, -50%, 0));
  }
}
.dropdown-menu.anchor-right-center {
  .dropdown-menu,
  > li > .dropdown-menu {
    @include transform(translate3d(-1em, -50%, 0));
  }
  li:hover > .dropdown-menu,
  &.active li > .dropdown-menu {
    @include transform(translate3d(0, -50%, 0));
  }
}


/*==============================================================================
  @Dropdown Arrows - #{$filename}
==============================================================================*/

/**
 * Base Arrow
 */
.dropdown.arrow,
.dropdown-menu.arrow {
  &:before,
  &:after {
    @include make-triangle-base();
    position: absolute;
  }
}

.dropdown.arrow {
  // Default Arrow Position
  &:before,
  &:after {
    top: auto;
    left: 1.5em;
    right: auto;
    bottom: 100%;
  }
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'up' );
    margin: 0 0 1px 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'up' );
  }
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'up' ); }
    &:after  { @include make-triangle( 7px, $color, 'up' ); }
  }
}

.dropdown-menu.arrow {
  // Default Arrow Position
  &:before,
  &:after {
    top: 1.2em;
    left: auto;
    right: 100%;
    bottom: auto;
  }
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'left' );
    margin: 0 1px 0 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'left' );
  }
  
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'left' ); }
    &:after  { @include make-triangle( 7px, $color, 'left' ); }
  }
}

/**
 * Arrow Up
 */
.anchor-bottom-left .dropdown.arrow,
.anchor-bottom-right .dropdown.arrow,
.anchor-bottom-center .dropdown.arrow {
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'up' );
    margin: 0 0 1px 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'up' );
  }
  
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'up' ); }
    &:after  { @include make-triangle( 7px, $color, 'up' ); }
  }
}

.anchor-bottom-left .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: 1.5em;
    right: auto;
    bottom: 100%;
  }
}
.anchor-bottom-right .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: auto;
    right: 1.5em;
    bottom: 100%;
  }
}
.anchor-bottom-center .dropdown.arrow {
  &:before,
  &:after {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 100%;
    @include transform(translate3d(-50%, 0, 0));
  }
}

/**
 * Arrow Down
 */
.anchor-top-left .dropdown.arrow,
.anchor-top-right .dropdown.arrow,
.anchor-top-center .dropdown.arrow {
  &:before {
    @include make-triangle( 7px, rgba($black, 0.25), 'down' );
    margin: 1px 0 0 0;
  }
  &:after {
    @include make-triangle( 7px, $white, 'down' );
  }
  &.inverted {
    &:before { @include make-triangle( 7px, $color, 'down' ); }
    &:after  { @include make-triangle( 7px, $color, 'down' ); }
  }
}

.anchor-top-left .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: 1.5em;
    right: auto;
    bottom: auto;
  }
}
.anchor-top-right .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: auto;
    right: 1.5em;
    bottom: auto;
  }
}
.anchor-top-center .dropdown.arrow {
  &:before,
  &:after {
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(-50%, 0, 0));
  }
}

/**
 * Arrow Right
 */
.anchor-left-top,
.anchor-left-bottom,
.anchor-left-center {
  
  .dropdown.arrow,
  .dropdown-menu.arrow {
    &:before {
      @include make-triangle( 7px, rgba($black, 0.25), 'right' );
      margin: 0 0 0 1px;
    }
    &:after {
      @include make-triangle( 7px, $white, 'right' );
    }
    &.inverted {
      &:before { @include make-triangle( 7px, $color, 'right' ); }
      &:after  { @include make-triangle( 7px, $color, 'right' ); }
    }
  }
}

.anchor-left-top .dropdown.arrow,
.anchor-left-top .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 1.2em;
    left: 100%;
    right: auto;
    bottom: auto;
  }
}
.anchor-left-bottom .dropdown.arrow,
.anchor-left-bottom .dropdown-menu.arrow {
  &:before,
  &:after {
    top: auto;
    left: 100%;
    right: auto;
    bottom: 1.2em;
  }
}
.anchor-left-center .dropdown.arrow,
.anchor-left-center .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 50%;
    left: 100%;
    right: auto;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}

/**
 * Arrow Left
 */
.anchor-right-top,
.anchor-right-bottom,
.anchor-right-center {
  
  .dropdown.arrow,
  .dropdown-menu.arrow {
    &:before {
      @include make-triangle( 7px, rgba($black, 0.25), 'left' );
      margin: 0 1px 0 0;
    }
    &:after {
      @include make-triangle( 7px, $white, 'left' );
    }
    &.inverted {
      &:before { @include make-triangle( 7px, $color, 'left' ); }
      &:after  { @include make-triangle( 7px, $color, 'left' ); }
    }
  }
}

.anchor-right-top .dropdown.arrow,
.anchor-right-top .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 1.2em;
    left: auto;
    right: 100%;
    bottom: auto;
  }
}
.anchor-right-bottom .dropdown.arrow,
.anchor-right-bottom .dropdown-menu.arrow {
  &:before,
  &:after {
    top: auto;
    left: auto;
    right: 100%;
    bottom: 1.2em;
  }
}
.anchor-right-center .dropdown.arrow,
.anchor-right-center .dropdown-menu.arrow {
  &:before,
  &:after {
    top: 50%;
    left: auto;
    right: 100%;
    bottom: auto;
    @include transform(translate3d(0, -50%, 0));
  }
}

} // endif classes

{'fraction_non_alphanumeric': 0.21180960457966713, 'fraction_numerical': 0.029311989822961942, 'mean_word_length': 2.369619574924094, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 173, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4531044', 'n_tokens_mistral': 14722, 'n_tokens_neox': 13674, 'n_words': 2863}