@use '../base' as *;

/* --------------------------------

File#: _2_dropdown
Title: Dropdown
Descr: A hoverable link that toggles the visibility of a dropdown list
Usage: codyhouse.co/license

-------------------------------- */

:root {
  --dropdown-item-padding: var(--space-xxs) var(--space-sm);
}

.dropdown {
  position: relative;
}

.dropdown__menu {
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  z-index: var(--z-index-popover, 5);
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
}

.dropdown__wrapper {
  max-height: 24px;
}

@media (pointer: fine) { // user has pointing device (e.g., mouse)
  .dropdown__wrapper,
  .open-dropdown {
    &:hover .dropdown__menu,
    &:focus .dropdown__menu {
      opacity: 1;
      visibility: visible;
    }
  }

  .dropdown__sub-wrapper:hover > .dropdown__menu {
    left: 100%;
  }
}

@media not all and (pointer: fine) {
  .dropdown__trigger-icon {
    display: none;
  }
}

.dropdown__item {
  display: block;
  text-decoration: none;
  color: var(--color-contrast-high);
  padding: var(--dropdown-item-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover, &.dropdown__item--hover {
    background-color: alpha(var(--color-contrast-higher), 0.075);
  }
}

.dropdown__separator { // h line divider
  height: 1px;
  background-color: var(--color-contrast-lower);
  margin: var(--dropdown-item-padding);
}

.dropdown__sub-wrapper {
  position: relative;

  > .dropdown__item { // item w/ right arrow
    position: relative;
    padding-right: calc(var(--space-sm) + 12px);

    .icon { // right arrow
      position: absolute;
      display: block;
      width: 12px;
      height: 12px;
      right: var(--space-xxs);
      top: calc(50% - 6px);
    }
  }

  > .dropdown__menu { // sub menu
    top: calc(var(--space-xxs) * -1);
    box-shadow: var(--inner-glow), var(--shadow-md);
  }
}