.dropdown {

position: relative;

}

.dropdown-caret {

display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
content: "";
border-style: $border-style;
// stylelint-disable-next-line primer/borders
border-width: $spacer-1 $spacer-1 0;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;

}

// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which // way the menu should render from the element triggering it.

.dropdown-menu {

position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 160px;
padding-top: $spacer-1;
padding-bottom: $spacer-1;
// stylelint-disable-next-line primer/spacing
margin-top: 2px;
list-style: none;
background-color: var(--color-bg-overlay);
background-clip: padding-box;
border: $border-width $border-style var(--color-border-primary);
border-radius: $border-radius;
box-shadow: var(--color-dropdown-shadow);

&::before,
&::after {
  position: absolute;
  display: inline-block;
  content: "";
}

// caret border
&::before {
  // stylelint-disable-next-line primer/borders
  border: $spacer-2 $border-style transparent;
  border-bottom-color: var(--color-border-primary);
}

// caret background (should match dropdown background)
&::after {
  // stylelint-disable-next-line primer/borders
  border: 7px $border-style transparent;
  // stylelint-disable-next-line primer/borders
  border-bottom-color: var(--color-bg-overlay);
}

// stylelint-disable-next-line selector-max-type
> ul {
  list-style: none;
}

}

.dropdown-menu-no-overflow {

width: auto;

.dropdown-item {
  padding: $spacer-1 $spacer-3;
  overflow: visible;
  text-overflow: inherit;
}

}

// Dropdown items (can be links or buttons) .dropdown-item {

display: block;
padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
overflow: hidden;
color: var(--color-text-primary);
text-overflow: ellipsis;
white-space: nowrap;

&:focus,
&:hover {
  color: var(--color-state-hover-primary-text);
  text-decoration: none;
  background-color: var(--color-state-hover-primary-bg);
  outline: none;

  > .octicon {
    color: inherit;
    opacity: 1;
  }

  [class*="color-text-"] {
    color: inherit !important;
  }

  > .Label {
    color: inherit !important;
    border-color: currentColor;
  }
}

&.btn-link {
  width: 100%;
  text-align: left;
}

}

.dropdown-signout {

width: 100%;
text-align: left;
background: none;
border: 0;

}

.dropdown-divider {

display: block;
height: 0;
margin: $spacer-2 0;
border-top: $border-width $border-style var(--color-border-primary);

}

.dropdown-header {

padding: $spacer-1 $spacer-3;
font-size: $h6-size;
color: var(--color-text-secondary);

}

.dropdown-item .octicon-check {

display: none;

}

// Directional classes // // Move the menu and the caret attached to it. Requires at least one of these on // the `.dropdown-menu` element.

.dropdown-menu-w {

top: 0;
right: 100%;
left: auto;
width: auto;
margin-top: 0;
margin-right: $spacer-2;

&::before {
  top: 10px;
  right: -$spacer-3;
  left: auto;
  border-color: transparent;
  border-left-color: var(--color-border-primary);
}

&::after {
  top: 11px;
  right: -14px;
  left: auto;
  border-color: transparent;
  // stylelint-disable-next-line primer/borders
  border-left-color: var(--color-bg-overlay);
}

}

.dropdown-menu-e {

top: 0;
left: 100%;
width: auto;
margin-top: 0;
margin-left: $spacer-2;

&::before {
  top: 10px;
  left: -$spacer-3;
  border-color: transparent;
  border-right-color: var(--color-border-primary);
}

&::after {
  top: 11px;
  left: -14px;
  border-color: transparent;
  // stylelint-disable-next-line primer/borders
  border-right-color: var(--color-bg-overlay);
}

}

.dropdown-menu-ne {

top: auto;
bottom: 100%;
left: 0;
// stylelint-disable-next-line primer/spacing
margin-bottom: 3px;

&::before,
&::after {
  top: auto;
  right: auto;
}

&::before {
  bottom: -$spacer-2;
  left: 9px;
  // stylelint-disable-next-line primer/borders
  border-top: $spacer-2 $border-style var(--color-border-primary);
  // stylelint-disable-next-line primer/borders
  border-right: $spacer-2 $border-style transparent;
  border-bottom: 0;
  // stylelint-disable-next-line primer/borders
  border-left: $spacer-2 $border-style transparent;
}

&::after {
  bottom: -7px;
  left: 10px;
  // stylelint-disable-next-line primer/borders
  border-top: 7px $border-style var(--color-bg-overlay);
  // stylelint-disable-next-line primer/borders
  border-right: 7px $border-style transparent;
  border-bottom: 0;
  // stylelint-disable-next-line primer/borders
  border-left: 7px $border-style transparent;
}

}

.dropdown-menu-s {

right: 50%;
left: auto;
transform: translateX(50%);

&::before {
  top: -$spacer-3;
  right: 50%;
  transform: translateX(50%);
}

&::after {
  top: -14px;
  right: 50%;
  transform: translateX(50%);
}

}

.dropdown-menu-sw {

right: 0;
left: auto;

&::before {
  top: -$spacer-3;
  right: 9px;
  left: auto;
}

&::after {
  top: -14px;
  right: 10px;
  left: auto;
}

}

.dropdown-menu-se {

&::before {
  top: -$spacer-3;
  left: 9px;
}

&::after {
  top: -14px;
  left: 10px;
}

}