@import (reference) "../../styles/less/mixins/_theming.less";

.np-panel {
  &__content {
    opacity: 0;
    visibility: hidden;
    background-color: var(--color-background-elevated);
    border-radius: var(--radius-small);
    box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
    transition:
      opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
      transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
      visibility 0s linear 0.2s;
    
    .np-theme-personal & {
      border-radius: var(--radius-small);
    }

    .remove-dark-themes-box-shadows();
  }

  &--open {
    .np-panel__content {
      transition:
        opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
        transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
        visibility 0s linear 0s;
      visibility: visible;
      opacity: 1;
      transform: none !important;
    }
  }

  &__arrow,
  &__arrow::before {
    position: absolute;
    width: 14px;
    height: 14px;
  }

  &__arrow::before {
    left: 0;
    content: "";
    transform: rotate(45deg);
    background: var(--color-background-elevated);
  }

  &[data-popper-placement^="top"] > &__content {
    transform: translateY(10px) scale(0.95);

    .np-panel__arrow {
      bottom: -6px;
    }
  }

  &[data-popper-placement^="right"] > &__content {
    transform: translateX(-10px) scale(0.95);

    .np-panel__arrow {
      left: -6px;
    }
  }

  &[data-popper-placement^="bottom"] > &__content {
    transform: translateY(-10px) scale(0.95);

    .np-panel__arrow {
      top: -6px;
    }
  }

  &[data-popper-placement^="left"] > &__content {
    transform: translateX(10px) scale(0.95);

    .np-panel__arrow {
      right: -6px;
    }
  }
}

.np-theme-personal {
  .np-panel__content {
    border-radius: var(--radius-medium);
    box-shadow: 0 0 40px rgb(69 71 69 / 20%);
  }

  &--forest-green,
  &--bright-green,
  &--dark {
    .np-dropdown-menu {
      background-color: var(--color-background-elevated);
    }
  }
}