/**
 * KebabMenu Styles
 *
 * Desktop: Dropdown menu positioned below trigger
 * Mobile: Uses BottomSheet component
 */

.kebab-menu {
  position: relative;
  display: inline-flex;
}

/* Trigger Button */
.kebab-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary, #666);
  transition: background-color 0.2s, color 0.2s;
}

.kebab-menu__trigger:hover {
  background-color: var(--hover-bg, rgba(0, 0, 0, 0.08));
  color: var(--text-primary, #333);
}

.kebab-menu__trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-color, #9747ff);
}

.kebab-menu__trigger.active {
  background-color: var(--active-bg, rgba(0, 0, 0, 0.12));
  color: var(--text-primary, #333);
}

.kebab-menu__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Size Variants */
.kebab-menu--small .kebab-menu__trigger {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.kebab-menu--large .kebab-menu__trigger {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* Dropdown Menu */
.kebab-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  margin-top: 4px;
  padding: 4px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: kebabDropdownIn 0.15s ease-out;
}

@keyframes kebabDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu Item */
.kebab-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary, #333);
  cursor: pointer;
  transition: background-color 0.15s;
}

.kebab-menu__item:hover {
  background-color: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.kebab-menu__item:focus {
  outline: none;
  background-color: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

/* Item Icon */
.kebab-menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--text-secondary, #666);
}

.kebab-menu__item:hover .kebab-menu__item-icon {
  color: var(--text-primary, #333);
}

/* Item Label */
.kebab-menu__item-label {
  flex: 1;
}

/* Danger Variant */
.kebab-menu__item--danger {
  color: var(--danger-color, #d32f2f);
}

.kebab-menu__item--danger .kebab-menu__item-icon {
  color: var(--danger-color, #d32f2f);
}

.kebab-menu__item--danger:hover {
  background-color: rgba(211, 47, 47, 0.08);
}

/* Disabled State */
.kebab-menu__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Divider */
.kebab-menu__divider {
  height: 1px;
  margin: 4px 0;
  background-color: var(--border-color, rgba(0, 0, 0, 0.08));
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .kebab-menu__trigger {
    color: var(--text-secondary-dark, #aaa);
  }

  .kebab-menu__trigger:hover,
  .kebab-menu__trigger.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary-dark, #fff);
  }

  .kebab-menu__dropdown {
    background: var(--bg-dark, #2a2a2a);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  .kebab-menu__item {
    color: var(--text-primary-dark, #fff);
  }

  .kebab-menu__item:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .kebab-menu__item-icon {
    color: var(--text-secondary-dark, #aaa);
  }

  .kebab-menu__divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
}