.mgbee-bookmark-wrap {
  position: relative;
  display: inline-flex;
}

.mgbee-bookmark[data-active="1"] {
  color: var(--mgbee-color-primary);
}

.mgbee-bookmark:focus-visible,
.mgbee-bookmark-dialog__close:focus-visible {
  outline: 2px solid var(--mgbee-color-focus);
  outline-offset: 2px;
}

.mgbee-bookmark-tooltip {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 14rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border-radius: var(--mgbee-radius);
  background: var(--mgbee-color-bg-elevated);
  box-shadow: 0 0 0 1px var(--mgbee-color-border);
  color: var(--mgbee-color-text);
  font-size: 0.78rem;
  transform: translateX(-50%);
}

.mgbee-bookmark-wrap--below .mgbee-bookmark-tooltip {
  bottom: auto;
  top: calc(100% + 0.45rem);
}

.mgbee-bookmark-dialog {
  width: min(22rem, calc(100% - 2rem));
  padding: var(--mgbee-space-5);
  border: 1px solid var(--mgbee-color-border);
  border-radius: var(--mgbee-radius-lg);
  background: var(--mgbee-color-bg-elevated);
  color: var(--mgbee-color-text);
}

.mgbee-bookmark-dialog::backdrop {
  background: color-mix(in srgb, var(--mgbee-color-bg) 72%, transparent);
}

.mgbee-bookmark-dialog h2 {
  margin: 0 0 var(--mgbee-space-2);
  font-size: 1.15rem;
}

.mgbee-bookmark-dialog p {
  margin: 0 0 var(--mgbee-space-4);
  color: var(--mgbee-color-text-muted);
}

.mgbee-bookmark-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mgbee-space-2);
}

.mgbee-bookmark-dialog .mgbee-button--primary {
  color: var(--mgbee-color-on-accent);
}

.mgbee-bookmark-dialog .mgbee-button--ghost {
  color: var(--mgbee-color-text);
}

.mgbee-bookmark-dialog .mgbee-bookmark-dialog__close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mgbee-color-text-muted);
  font: inherit;
  cursor: pointer;
}