/*-------------------------------------------*\
    2.17. Dropdown
\*-------------------------------------------*/

/* Disable content revealing on page load */
.dropdown-unfold {
  &[aria-labelledby] {
    opacity: 0;
  }

  &[aria-labelledby][role="tabpanel"] {
    display: block;
    opacity: 1;
  }

  &[aria-labelledby].u-unfold--css-animation,
  &[aria-labelledby].u-unfold--jquery-slide {
    display: block;
    opacity: 1;
  }

  &.u-unfold--css-animation.u-unfold--hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}

.u-unfold--css-animation.u-unfold--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.dropdown-unfold.show {
  display: block;
  opacity: 1;
}

/* Menu */
.dropdown-menu {
  margin-top: .5rem;
  font-size: ($font-size-base * .875);
  padding-top: $dropdown-padding-y;
  padding-bottom: $dropdown-padding-y;
  box-shadow: $dropdown-box-shadow;
}

/* Nav Link */
.dropdown-nav-link {
  color: $dropdown-link-color;
  font-weight: $dropdown-link-font-weight;
  font-size: $dropdown-link-font-size;

  &:hover {
    color: $dropdown-link-hover-color;
  }

  &-dark {
    color: $dark;
  }
}

/* Item */
.dropdown-item {
    font-size: $dropdown-item-font-size;

  &:hover {
    color: $dropdown-item-states;
  }

  &.active {
    color: $dropdown-item-states;
  }

  &-icon {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: $dropdown-icon-font-size;
    min-width: $dropdown-icon-width;
    max-width: $dropdown-icon-width;
    margin-right: .5rem;
  }
}

/* Toggle */
.dropdown-toggle{
  &::after {
    display: inline-block;
    font-family: $font-family-font-awesome-icon;
    font-size: 80%;
    font-weight: 900;
    content: $dropdown-toggle-pseudo-content;
    margin-left: .5rem;
  }

  &-collapse {
    &::after {
      transition: $dropdown-toggle-arrow-transition;
    }

    &[aria-expanded="true"] {
      &::after {
        transform: $dropdown-toggle-arrow-collapse-rotation;
      }
    }
  }
}



/* Positions */
.dropdown-menu {
  &-right {
    right: 0;
    left: auto !important;
  }

  &-bottom {
    top: auto;
    bottom: 0;
  }
}

// Small Devices
@include media-breakpoint-up(sm) {
  .dropdown-menu {
    &-sm-right {
      right: 0;
      left: auto !important;
    }
  }
}

// Medium Devices
@include media-breakpoint-up(md) {
  .dropdown-menu {
    &-md-right {
      right: 0;
      left: auto !important;
    }
  }
}

// Large Devices
@include media-breakpoint-up(lg) {
  .dropdown-menu {
    &-lg-right {
      right: 0;
      left: auto !important;
    }
  }
}

.dropdown-menu-right.dropdown-menu-right-fix {
    &[class*="dropdown-menu-right-fix"] {
      right: 0 !important;
    }

    @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        &#{$infix} {
            @each $dropdown-position in $dropdown-positions {
                &-#{$dropdown-position} {
                    @include media-breakpoint-up($breakpoint) {
                        right: $dropdown-position * 1% !important;
                    }
                }
            }
        }
    }
}

.destination-dropdown {
  display: none;
  a {
      font-size: 1rem;
      padding-left: 0 !important;
      padding-right: 0 !important;
      color: $white;
  }
}

.dropdown:hover {
  .destination-dropdown {
    display: block;
  }
}
.footer {
    .list-group-item-action {
        color:$gray-1;
        &:hover {
            color: $primary;
        }
    }
}

.bootstrap-select__custom {
    .filter-option-inner-inner {
        color:$gray-1;
    }

    .dropdown-menu {
        @include media-breakpoint-up(md) {
            left: auto !important;
            right: 0;
        }
    }

    .dropdown-menu {
        overflow: unset !important;
        margin-bottom: 1.25rem;
        min-width:  15rem;
        border-radius: 2px;
        @include media-breakpoint-up(xl) {
            &::after {
                content: '';
                display: block;
                position: absolute;
                bottom: -10px;
                right: 24px;
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid $white;
            }
        }
    }

    li {
        margin: 0 2rem;
    }

    a{
        padding: 2rem 0;
    }

    .active{
        a{
            span {
                width:100%;
            }
            &::after {
                display: inline-block;
                font-family: "Font Awesome 5 Free";
                font-size: 80%;
                font-weight: 900;
                content: "\f00c";
                margin-left: -0.5rem;
            }
        }
    }
}

.bootstrap-select {
  &__custom-nav {
    .dropdown-toggle .filter-option {
      position: relative;
      top: 0;
      left: 0;
      padding-top: inherit;
      padding-right: inherit;
      padding-bottom: inherit;
      padding-left: inherit;
      height: 100%;
      width: 100%;
      text-align: left;
      padding: 0;
      margin-right: 25px;
    }
  }
}

[class*="u-header--bg-transparent"]:not(.js-header-fix-moment) .dropdown-connector {
    @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        &#{$infix} {
            > a.active:before {
                @include media-breakpoint-up($breakpoint) {
                    position: absolute;
                    display: block;
                    pointer-events: none;
                    border: 10px solid transparent;
                    border-bottom-color: #fff;
                    content: '';
                    height: 0;
                    left: 50%;
                    width: 0;
                    top: 100%;
                    transform: translateY(-100%);
                    animation-name: slideInUp;
                    animation-duration: 210ms;
                }
            }

            &.shopping-cart > a.active:before {
                left: 0;
            }
        }
    }
}
.tab-dropdown {
    border-bottom: 2px solid $gray-2;
    &.show{
        border-bottom: 2px solid $primary;
    }
    .dropdown-toggle {
        &::after {
            display: none;
        }

        &.bs-placeholder {
            color:$dark;
        }
    }
    .dropdown-item {
        color:$gray-1;
        &:hover {
            color: $primary;
        }
    }
    .dropdown-menu {
        li {
            margin: 0 2rem;
        }

        a {
            padding: 0.8rem 0;
        }
    }
}

.dropdown-custom {
    .dropdown-menu {
        left: auto !important;
    }

    .dropdown-nav-link {
        border-bottom: 2px solid $gray-2;

        &.active {
            border-bottom: 2px solid $primary;
        }
    }

    .dropdown-toggle::after {
        margin-left: auto !important;
        display: flex;
        align-items:center;
        font-size: 16px;
        font-weight:bold;
        color: $black;
    }

    &_white {
        .dropdown-toggle::after {
            color: $white;
        }

        .dropdown-nav-link.active {
            border-color: $white;
        }
    }
}

.collapse_custom {
  .collapsed .card-btn-arrow  {
    transform: rotate(-180deg);
  }
}

.custom-dropdown {
  .dropdown-toggle {
    padding: .475rem 1.7rem !important;
    &::before {
      display: inline-block;
      font-family: $font-family-font-awesome-icon;
      font-size: 70%;
      font-weight: 900;
      content: $dropdown-toggle-pseudo-content-1;
      color: $gray-6;
      margin-right: .4rem;
    }

    &::after {
      display: none;
    }

    &-collapse {
      &::before {
        transition: $dropdown-toggle-arrow-transition;
      }

      &[aria-expanded="true"] {
        border-left: 2px solid $primary !important;
        span {
          color: $primary !important;
        }
        &::before {
          transform: $dropdown-toggle-arrow-collapse-rotation-1;
          color: $primary;
        }
      }
    }
  }
  .dropdown-item {
    padding: .475rem 2.5rem;
  }
  .list-item {
    margin-bottom: .5rem;
  }
}
