@import "../settings/colors";
@import "../settings/core";
@import "../settings/dropdown";

@import "../tools/functions/core";
@import "../tools/mixins/core";

//
// @mixins
//
//
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
// We use this to style the dropdown container element.
// $content-list - Sets list-style. Default: list. Options: [list, content]
// $triangle - Sets if dropdown has triangle. Default:true.
// $max-width - Default: $f-dropdown-max-width || 200px.
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
  display: none;
  left: -9999px;
  list-style: $f-dropdown-list-style;
  margin-#{$default-float}: 0;
  position: absolute;
  &.open {
    display: block;
  }
  >*:first-child {
    margin-top: 0;
  }
  >*:last-child {
    margin-bottom: 0;
  }
  @if $content==list {
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
    font-size: $f-dropdown-font-size;
    height: $f-dropdown-height;
    max-height: $f-dropdown-max-height;
    width: 100%;
    z-index: 89;
  }
  @else if $content==content {
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
    font-size: $f-dropdown-font-size;
    height: $f-dropdown-height;
    max-height: $f-dropdown-max-height;
    padding: $f-dropdown-content-padding;
    width: 100%;
    z-index: 89;
  }
  @if $triangle==bottom {
    margin-top: $f-dropdown-margin-top;
    @if $f-dropdown-triangle-size !=0px {
      &:before {
        @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
        position: absolute;
        top: -($f-dropdown-triangle-size * 2);
        #{$default-float}: $f-dropdown-triangle-side-offset;
        z-index: 89;
      }
      &:after {
        @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
        position: absolute;
        top: -(($f-dropdown-triangle-size + 1) * 2);
        #{$default-float}: $f-dropdown-triangle-side-offset - 1;
        z-index: 88;
      }
      &.right:before {
        #{$default-float}: auto;
        #{$opposite-direction}: $f-dropdown-triangle-side-offset;
      }
      &.right:after {
        #{$default-float}: auto;
        #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
      }
    }
  }
  @if $triangle==$default-float {
    margin-top: 0;
    margin-#{$default-float}: $f-dropdown-margin-right;
    &:before {
      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
      position: absolute;
      top: $f-dropdown-triangle-side-offset;
      #{$default-float}: -($f-dropdown-triangle-size * 2);
      z-index: 89;
    }
    &:after {
      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
      position: absolute;
      top: $f-dropdown-triangle-side-offset - 1;
      #{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
      z-index: 88;
    }
  }
  @if $triangle==$opposite-direction {
    margin-top: 0;
    margin-#{$default-float}: -$f-dropdown-margin-right;
    &:before {
      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
      position: absolute;
      top: $f-dropdown-triangle-side-offset;
      #{$opposite-direction}: -($f-dropdown-triangle-size * 2);
      #{$default-float}: auto;
      z-index: 89;
    }
    &:after {
      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
      position: absolute;
      top: $f-dropdown-triangle-side-offset - 1;
      #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
      #{$default-float}: auto;
      z-index: 88;
    }
  }
  @if $triangle==top {
    margin-left: 0;
    margin-top: -$f-dropdown-margin-bottom;
    &:before {
      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
      bottom: -($f-dropdown-triangle-size * 2);
      position: absolute;
      top: auto;
      #{$default-float}: $f-dropdown-triangle-side-offset;
      #{$opposite-direction}: auto;
      z-index: 89;
    }
    &:after {
      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
      bottom: -($f-dropdown-triangle-size * 2) - 2;
      position: absolute;
      top: auto;
      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
      #{$opposite-direction}: auto;
      z-index: 88;
    }
  }
  @if $max-width {
    max-width: $max-width;
  }
  @else {
    max-width: $f-dropdown-max-width;
  }
}

// @MIXIN
//
// We use this to style the list elements or content inside the dropdown.
@mixin dropdown-style {
  cursor: $cursor-pointer-value;
  font-size: $f-dropdown-font-size;
  line-height: $f-dropdown-line-height;
  margin: 0;
  &:hover,
  &:focus,
  &.hover,
  &.focus {
    background: $f-dropdown-list-hover-bg;
  }
  &.radius {
    @include radius($f-dropdown-radius);
  }
  a,
  span {
    display: block;
    padding: $f-dropdown-list-padding;
    color: $f-dropdown-font-color;
  }
}

@include exports("dropdown") {
  /* Foundation Dropdowns */
  .f-dropdown {
    @include dropdown-container(list, bottom);
    &.drop-#{$opposite-direction} {
      @include dropdown-container(list, #{$default-float});
    }
    &.drop-#{$default-float} {
      @include dropdown-container(list, #{$opposite-direction});
    }
    &.drop-top {
      @include dropdown-container(list, top);
    }
    // max-width: none;
    li {
      @include dropdown-style;
    }
    // You can also put custom content in these dropdowns
    &.content {
      @include dropdown-container(content, $triangle: false);
    }
    // Sizes
    &.tiny {
      max-width: 200px;
    }
    &.small {
      max-width: 300px;
    }
    &.medium {
      max-width: 500px;
    }
    &.large {
      max-width: 800px;
    }
    &.mega {
      width: 100%!important;
      max-width: 100%!important;
      &.open {
        left: 0!important;
      }
    }
  }
}


/* begin dropdown override */

@include exports("dropdown-ui") {
  .dropdown,
  [cs-dropdown],
  [cui-dropdown]  {
    position: relative;
    display: inline-block;
  }
  /* Foundation Dropdowns */
  .actions-menu.open .dropdown-menu {
    left: auto;
    right: 14px;
  }
  .dropdown-menu {
    @include dropdown-container(list, false);
    @include radius($f-dropdown-radius);
    border-color: $gray-5;
    top: calc(100% + 2px);
    width: auto;
    max-height: rem-calc(261);
    max-width: none;
    &:not(.nested) {
      overflow-y: auto;
    }
    z-index: $f-dropdown-z-index;
    .sub-menu {
      @extend %dropdown-menu;
      display: none;
    }
    .open & {
      &:not(.sub-menu) {
        display: block !important;
        visibility: visible !important;
      }
      left: 0;
      .sub-menu {
        left: calc(100% - 1px);
        padding-left: inherit;
      }
    }
    // vertical dropdown styles for isVisible method inside dropdown/dropdown.js
    [cs-dropdown] & ,
    [cui-dropdown] & {
      &:not(.sub-menu) {
        visibility: hidden;
      }
      &.visible {
        visibility: visible;
      }
    }
    li {
      @include dropdown-style;
      a,
      span {
        white-space: nowrap;
      }
    }
    .divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #ccc;
    }
    .pull-right>& {
      right: 0;
      left: auto;
    }
    // You can also put custom content in these dropdowns
    &.content {
      @include dropdown-container(content, $triangle: false);
    }
    &.top {
      top: auto;
      bottom: 100%;
      margin-bottom: 2px;
    }
    // Sizes
    &.tiny {
      max-width: 200px;
    }
    &.small {
      max-width: 300px;
    }
    &.medium {
      max-width: 500px;
    }
    &.large {
      max-width: 800px;
    }
    &.mega {
      width: 100% !important;
      max-width: 100% !important;
      &.open {
        left: 0 !important;
      }
    }
  }
  %dropdown-menu {
    @extend .dropdown-menu;
  }
  .dropdown.open {
    i {
      color: $blue-press;
    }
  }
  .dropdown-primary {
    background: $brand-white;
    border: none;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .18);
    li {
      &:hover {
        background: $gray-7;
      }
      a {
        color: $gray-2;
        padding: 6px 16px;
        span {
          padding: 0;
        }
      }
    }
  }
}