@import "src/assets/variables";

$dropdown-nav-content-color: $primary-color !default;
$dropdown-nav-content-background-color: $secondary-background-color !default;

.muncher-dropdown-nav {
  position: relative;
  display: inline-block;
  vertical-align: middle;

  a {
    text-decoration: none;
  }

  .small {
    font-size: .5rem;
  }

  .muncher-dropdown-nav--content {
    display: block;
    white-space: nowrap;
    background: $dropdown-nav-content-background-color;
    color: $dropdown-nav-content-color;
    min-width: 5rem;
    padding: 0.7rem 1rem; // ✅ equal padding left/right
    z-index: 10;
  }
}

@media (min-width: $large-size) {
  .muncher-dropdown-nav {
    .muncher-dropdown-nav--content {
      box-shadow: 0.5rem 0.5rem 0.6rem rgba(0, 0, 0, 0.2);
      display: none;
      position: absolute;
      top: 100%;
      left: 0; // default: open from left edge
      transform-origin: top left;
      transition: opacity 0.15s ease, transform 0.15s ease;
      opacity: 0;
      transform: translateY(0.25rem);
    }

    // 👇 Drop from right edge, expand left (but same padding and text alignment)
    &.drop-left {
      .muncher-dropdown-nav--content {
        left: auto;
        right: 0;
        transform-origin: top right;
      }
    }
  }

  // Hover state
  .muncher-dropdown-nav:hover .muncher-dropdown-nav--content {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}