////// Pure HTML dropdown menu //////


.dropdown-actions,
.dropdown-wrapper,
.popover-wrapper {
  position: relative;
  width: fit-content;
}

details.dropdown-actions[open] summary:after,
.dropdown-wrapper[open] summary:after,
.popover-wrapper[open] summary:after {
  position: fixed;
  z-index: 10;
  display: block;
  height: 100vh;
  width: 100vw;
  cursor: pointer;
  background-color: transparent;
  content: "";
  bottom: 0;
  left: 0;
}

.popover-menu, 
.dropdown-menu {
  flex-direction: column;
  overflow: hidden;
  width: $popover-width;
  padding: $spacing-xxs;
  background-color: $primary;
  color: $white;
  border-radius: $border-radius;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}

details.dropdown-actions[open] .dropdown-menu, 
details.dropdown-actions[open] .popover-menu,
.dropdown-wrapper[open] .dropdown-menu,
.popover-wrapper[open] .popover-menu {
  display: flex;
  position: absolute;
  top: $btn-height;
  left: 0;
  z-index: $zindex-popover;
  margin-top: 0.25rem;
}

details.dropdown-actions[open].dropup .dropdown-menu,
details.dropdown-actions[open].dropup .popover-menu,
.dropdown-wrapper[open].dropup .dropdown-menu,
.popover-wrapper[open].dropup .popover-menu {
  bottom: $btn-height;
  top: auto;
  margin-top: 0;
  margin-bottom: 2px;
}

details.dropdown-actions[open].dropright .dropdown-menu,
details.dropdown-actions[open].dropright .popover-menu,
.dropdown-wrapper[open].dropright .dropdown-menu,
.popover-wrapper[open].dropright .popover-menu {
  right: 0;
  left: auto;
}

.popover-menu .popover-action, 
.dropdown-menu .dropdown-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 1px;
  padding: $spacing-xs;
  font-size: $font-size-base;
  font-weight: 600;
  color: $white;
  border-radius: $border-radius;
  line-height: 1.2;
  user-select: none;

  & .icon {
    width: $spacing;
  }

  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
  }
  &:hover .icon, &:focus .icon {
    color: $white;
  }
  &.active {
    color: $link-hover-color;
    background-color: $petrol-dark;
  }
  &.active .icon {
    color: $link-hover-color;
  }
  &:last-child {
    margin-bottom: 0;
  }
  &.disabled, &.disabled:hover, &.disabled:focus {
    opacity: 0.2;
    pointer-events: none;
  }
}

// Info popover 

.popover-menu.info, 
.dropdown-menu.info {
  padding: $popover-padding;
  background-color: $petrol-dark;
}

.popover-menu.info .popover-title, 
.dropdown-menu.info .popover-title {
  font-size: $font-size-base;
  line-height: 1.1;
  font-weight: bold;
  margin-bottom: $spacing-xxs;
}

.popover-menu.info .popover-content, 
.dropdown-menu.info .popover-content {
  font-size: $font-size-sm;
}

.popover-menu.info .popover-actions, 
.dropdown-menu.info .popover-actions {
  margin-top: $spacing-xs;
}