/* dropdown examples */
$dropDown-width: 200px !default;
$dropDown-wide-width: 450px !default;
$dropDown-narrow-width: 8em !default;

.dropDown {
  @extend .relative;
}
.dropDown-content {
  position: absolute;
  z-index: 10;
  left: calc(50% - #{$dropDown-width/2});
  top: 100%;
  margin-top: 2rem;
  display: block;
  opacity: 1;
  transition: visibility 0s ease, transform .15s ease, opacity .15s ease ;
  transform-origin: top center;
  transform: scale(1,1);
  visibility: visible;
  transition-delay: 0s;
  width: $dropDown-width;
  background: var(--bgcolor-main-area, $white);
  border-radius: $global-border-radius;
  box-shadow: 0 0 16px 3px $input-shadow-color;
  color: var(--color-main-area, $pm-global-grey);
}

.dropDown-content--narrow {
  left: calc(50% - #{$dropDown-narrow-width/2});
  width: $dropDown-narrow-width;
}

.dropDown-content--wide {
  left: calc(50% - #{$dropDown-wide-width/2});
  width: $dropDown-wide-width;
}

.dropDown-content--rightbottom {
  left: 100%;
  bottom: 0;
  top: auto;
  margin-left: 2em;
  transform-origin: center left;
}

@if $rtl-option == true {
  [dir="rtl"] {
    .dropDown-content--rightbottom {
      left: auto;
      right: 100%;
      margin-right: 2em;
      transform-origin: center right;
    }
  }
}


/* This is the hidden state */
[hidden].dropDown-content {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: scale(1,0);
  transition-delay: .15s, 0s, 0s;
}
[hidden].dropDown-content--rightbottom {
  transform: scale(0,1);
}

.dropDown-contentInner {
  position: relative;
  overflow: auto;
  min-height: 4em;
  max-height: 30vh;
  padding: 0; // no padding for the drop shadow :-\
  margin: 0;

  background: var(--bgcolor-main-area, $white) no-repeat;
  background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent);
  background-position: 50% 0, 0 100%;
  background-size: calc(100% - 20px) 3px;

}
.dropDown-contentInner {
  &::before,
  &::after {
    content: '';
    position: relative;
    display: block;
    z-index: 1;
    background: var(--bgcolor-main-area, $white);
    height: 10px;
  }
}

/* position of dropDown variations */
.dropDown--leftArrow .dropDown-content {
  left: 0;
}
.dropDown--rightArrow .dropDown-content {
  left: auto;
  right: 0;
}

@if $rtl-option == true {
  [dir="rtl"] {
    .dropDown--leftArrow .dropDown-content {
      right: 0;
      left: auto;
    }
    .dropDown--rightArrow .dropDown-content {
      left: 0;
      right: auto;
    }
  }
}

/* arrow on top of dropdown */
.dropDown-content::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: calc(50% - 1rem);
  width: 1rem;
  height: 1rem;
  border: 1rem solid transparent;
  border-bottom: 1rem solid var(--bgcolor-main-area, $white);
}

.dropDown--leftArrow .dropDown-content::before {
  left: 1rem;
}
.dropDown--rightArrow .dropDown-content::before {
  left: auto;
  right: 1rem;
}

.dropDown--leftBottomArrow .dropDown-content::before {
  top: auto;
  left: -2rem;
  bottom: 1rem;
  border: 1rem solid transparent;
  border-right: 1rem solid var(--bgcolor-main-area, $white);
}

@if $rtl-option == true {
  [dir="rtl"] {
    .dropDown-content::before {
      right: calc(50% - 1rem);
      left: auto;
    }

    .dropDown--leftArrow .dropDown-content::before {
      right: 1rem;
      left: auto;
    }
    .dropDown--rightArrow .dropDown-content::before {
      right: auto;
      left: 1rem;
    }

    .dropDown--leftBottomArrow .dropDown-content::before {
      left: 100%;
      right: auto;
      border: 1rem solid transparent;
      border-left: 1rem solid var(--bgcolor-main-area, $white);
    }
  }
}

.dropDown-link,
.dropDown-link:focus,
.dropDown-link:hover,
.dropDown-link:active {
  color: currentColor;
  text-decoration: none;
}
.dropDown-item:focus-within,
.dropDown-item:hover {
  background-color: var(--bgcolor-input, $pm-global-light);
}
.dropDown-item {
	padding-left: 1em;
}

/* border on items */
.dropDown-item + .dropDown-item {
  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
}

/* pagination caret */
.expand-caret {
  fill: currentColor;
}
.dropDown [aria-expanded="true"] .expand-caret {
  @extend .rotateX-180;
}