lucent-laravel/front/sass/_dropdown.scss

.dropdown {
  position: relative;
  z-index: 20;
  overflow: visible;

}

.dropdown-button > div {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: visible;
  position: absolute;
  border-radius: 12px;
  z-index: 20;
  background: var(--p20);
  transition: 600ms;
  flex-grow: 1;
  top: 35px;
  min-width: max-content;


  &.orientation-right {
    right: 0;
  }

  &.orientation-left {
    left: 0;
  }


}

.dropdown-header, .dropdown-item {
  display: flex;
  align-items: center;
  gap: 3px;
  text-wrap: nowrap;
}

.dropdown-header {
  padding: 10px;
}

.dropdown-item {
  font-size: 14px;
  padding: 3px 10px;

  &:hover {
    background: var(--p30);
    border-radius: 12px;

    button {
      background: var(--p30);
    }
  }

  .button-icon {
    flex-shrink: 0;

  }
}