//
// _dropdown.scss
//

.dropdown-menu {
  box-shadow: var(--#{$prefix}dropdown-box-shadow);
  animation-name: DropDownSlideUp;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  will-change: transform;
  position: absolute;
  z-index: 1000;

  &[data-popper-placement="top-start"],
  &[data-popper-placement="top"] {
    animation-name: DropDownSlideDown;
  }
}

// Dropdwon Animation
@keyframes DropDownSlideUp {
  100% {
    margin-top: 0px;
  }

  0% {
    margin-top: 3px;
  }
}

@keyframes DropDownSlideDown {
  100% {
    margin-bottom: 0;
  }

  0% {
    margin-bottom: 2px;
  }
}


//Custom Dropdown Sizes
$dropdown-menu-xxl-width: 740px;
$dropdown-menu-xl-width: 600px;
$dropdown-menu-lg-width: 340px;
$dropdown-menu-md-width: 250px;

@include media-breakpoint-up(md) {
  .dropdown-menu-xxl {
    width: $dropdown-menu-xxl-width;
  }

  .dropdown-menu-xl {
    width: $dropdown-menu-xl-width;
  }
}

@include media-breakpoint-up(sm) {
  .dropdown-menu-lg {
    width: $dropdown-menu-lg-width;
  }

  .dropdown-menu-md {
    width: $dropdown-menu-md-width;
  }

  .dropdown-menu-full {
    // width: 100vw;
    width: auto;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
  }
}

// Dropdown arrow hide
.drop-arrow-none {
  &:after {
    display: none;
  }
}

// Dropdown Split Style
.dropdown-toggle-split {
  &:before {
    content: "";
    position: absolute;
    background-color: rgba($white, 0.12);
    top: calc(#{$btn-border-width} * -1);
    bottom: calc(#{$btn-border-width} * -1);
    right: calc(#{$btn-border-width} * -1);
    left: 0;
    border-radius: 0 $btn-border-radius $btn-border-radius 0;
  }
}

.dropstart {
  .dropdown-toggle-split {
    &::before {
      inset: auto;
      border-radius: 0;
      position: relative;
      z-index: 1;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      background-color: rgba($dark, 0.1);
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: $btn-border-radius 0 0 $btn-border-radius;
      border: none;
      margin-left: 0;
    }
  }
}

// Custom select type Dropdown
.drop-custom-active {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: var(--#{$prefix}dropdown-item-padding-x);
    font-size: 16px;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7'/%3E%3C/svg%3E");
  }
}
