/* DJO Share Menu — Skeleton

 * Structural layout only + skeleton defaults for the share menu component.
 * All visual properties are driven by --share-* variables.
 *
 * Display modes (set via data-display-mode on .djo-share-menu):
 *   inline  — icons in a horizontal row, always visible, no trigger
 *   radial  — trigger button, icons fan out in an arc on click
 *   overlay — trigger button, opens a centered modal with icons
 *
 * NO SKIN: renders a visible skeleton — neutral trigger, positioned icons,
 * standard sizing. Functional but unbranded.
 *
 * TO SKIN: set --share-* variables on .djo-share-menu
 * See /skins/sharemenu.djo.css for the DJO brand skin.

*/

.djo-share-menu {
  /* colors */
  --share-trigger-bg: #555;
  --share-trigger-text: #fff;
  --share-trigger-hover-bg: #444;
  --share-trigger-active-bg: #c0392b;
  --share-icon-color: inherit;
  --share-icon-hover-scale: 1.25;
  --share-tooltip-bg: #555;
  --share-tooltip-text: #fff;
  --share-overlay-bg: rgba(0, 0, 0, 0.5);
  --share-overlay-panel-bg: #fff;
  --share-overlay-text: #333;

  /* sizing */
  --share-trigger-size: 38px;
  --share-trigger-font-size: 16px;
  --share-icon-font-size: 24px;
  --share-inline-gap: 12px;

  /* effects */
  --share-transition: 0.3s ease;
  --share-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --share-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}


/* reset */
.djo-share-menu *,
.djo-share-menu *::before,
.djo-share-menu *::after {
  box-sizing: border-box;
}


/* wrapper */
.djo-share-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════════════
   SHARED: trigger button (radial + overlay)
   ═══════════════════════════════════════════════ */

.djo-share-menu__trigger {
  width: var(--share-trigger-size);
  height: var(--share-trigger-size);
  border-radius: 50%;
  border: none;
  background: var(--share-trigger-bg);
  color: var(--share-trigger-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--share-trigger-font-size);
  position: relative;
  z-index: 2;
  transition: transform var(--share-spring),
    background var(--share-transition);
}

.djo-share-menu__trigger:hover {
  transform: scale(1.05);
  background: var(--share-trigger-hover-bg);
}

.djo-share-menu__trigger--active {
  background: var(--share-trigger-active-bg);
}

.djo-share-menu__trigger--active:hover {
  background: var(--share-trigger-active-bg);
}

.djo-share-menu__trigger-icon {
  transition: transform var(--share-transition);
}

.djo-share-menu__trigger--active .djo-share-menu__trigger-icon {
  transform: rotate(90deg);
}


/* ═══════════════════════════════════════════════
   SHARED: icon button + glyph
   ═══════════════════════════════════════════════ */

.djo-share-menu__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.djo-share-menu__icon i {
  font-size: var(--share-icon-font-size);
  color: var(--share-icon-color);
}

.djo-share-menu__icon:hover {
  transform: scale(var(--share-icon-hover-scale));
}


/* ═══════════════════════════════════════════════
   SHARED: tooltip (copy confirmation)
   ═══════════════════════════════════════════════ */

.djo-share-menu__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--share-tooltip-bg);
  color: var(--share-tooltip-text);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: djo-share-menu-tooltip-fade 1.2s ease forwards;
}

@keyframes djo-share-menu-tooltip-fade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }

  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


/* ═══════════════════════════════════════════════
   MODE: INLINE
   Icons in a horizontal row, always visible, no trigger.
   ═══════════════════════════════════════════════ */

.djo-share-menu--inline .djo-share-menu__trigger {
  display: none;
}

.djo-share-menu--inline .djo-share-menu__nav {
  display: flex;
  align-items: center;
  gap: var(--share-inline-gap);
}

.djo-share-menu--inline .djo-share-menu__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: var(--share-shadow);
  transition: transform var(--share-transition);
}


/* ═══════════════════════════════════════════════
   MODE: RADIAL
   Trigger button. Icons fan out in an arc on click.
   ═══════════════════════════════════════════════ */

.djo-share-menu--radial .djo-share-menu__nav {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 1;
}

.djo-share-menu--radial .djo-share-menu__nav--open {
  z-index: 3;
}

.djo-share-menu--radial .djo-share-menu__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform var(--share-spring),
    opacity var(--share-transition);
  transition-delay: var(--share-delay, 0s);
  filter: var(--share-shadow);
}

/* radial: override base hover — position must be preserved */
.djo-share-menu--radial .djo-share-menu__icon:hover {
  transform: none;
}

.djo-share-menu--radial .djo-share-menu__nav--open .djo-share-menu__icon {
  opacity: 1;
  transform: translate(calc(-50% + var(--share-x, 0px)),
      calc(-50% + var(--share-y, 0px))) scale(1);
}

.djo-share-menu--radial .djo-share-menu__nav--open .djo-share-menu__icon:hover {
  transform: translate(calc(-50% + var(--share-x, 0px)),
      calc(-50% + var(--share-y, 0px))) scale(var(--share-icon-hover-scale)) !important;
}


/* ═══════════════════════════════════════════════
   MODE: OVERLAY
   Trigger button. Opens a centered modal with icons in a row.
   ═══════════════════════════════════════════════ */

.djo-share-menu--overlay .djo-share-menu__nav {
  display: none;
}

.djo-share-menu__overlay-bg {
  position: fixed;
  inset: 0;
  background: var(--share-overlay-bg);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--share-transition);
}

.djo-share-menu__overlay-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--share-overlay-panel-bg);
  border-radius: 12px;
  padding: 32px 40px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--share-transition),
    transform var(--share-spring);
  text-align: center;
  min-width: 200px;
}

.djo-share-menu__overlay-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--share-overlay-text);
  margin: 0 0 20px;
}

.djo-share-menu__overlay-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.djo-share-menu__overlay-icons .djo-share-menu__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: var(--share-shadow);
  transition: transform var(--share-transition);
}

.djo-share-menu__overlay-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color var(--share-transition);
}

.djo-share-menu__overlay-close:hover {
  color: #333;
}

/* overlay open state */
.djo-share-menu--overlay-open .djo-share-menu__overlay-bg {
  opacity: 1;
  pointer-events: auto;
}

.djo-share-menu--overlay-open .djo-share-menu__overlay-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}


/* ═══════════════════════════════════════════════
   MODE: BAR
   Trigger button. Expands into a horizontal pill with icons + close.
   ═══════════════════════════════════════════════ */

.djo-share-menu--bar {
  --share-bar-height: var(--share-trigger-size);
  --share-bar-icon-size: 18px;
  --share-bar-gap: 14px;
}

/* bar: trigger sits on top of the collapsed bar */
.djo-share-menu--bar .djo-share-menu__trigger {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: transform var(--share-spring),
    background var(--share-transition),
    opacity var(--share-transition);
}

.djo-share-menu--bar .djo-share-menu__trigger:hover {
  transform: translateY(-50%) scale(1.05);
}

/* bar: the expanding pill */
.djo-share-menu__bar {
  height: var(--share-bar-height);
  border-radius: calc(var(--share-bar-height) / 2);
  background: var(--share-trigger-bg);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 10px 0 14px;
  gap: var(--share-bar-gap);
  overflow: hidden;
  width: var(--share-trigger-size);
  opacity: 0;
  pointer-events: none;
  transition: width var(--share-spring),
    opacity 0.15s ease;
}

.djo-share-menu__bar-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--share-bar-gap);
}

.djo-share-menu__bar-icons .djo-share-menu__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--share-transition);
}

.djo-share-menu__bar-icons .djo-share-menu__icon i {
  font-size: var(--share-bar-icon-size);
  color: #fff;
}

.djo-share-menu__bar-icons .djo-share-menu__icon:hover {
  transform: scale(var(--share-icon-hover-scale));
}

.djo-share-menu__bar-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--share-transition);
}

.djo-share-menu__bar-close:hover {
  color: #fff;
}

/* bar: tooltip position override */
.djo-share-menu__bar-icons .djo-share-menu__tooltip {
  bottom: calc(100% + 8px);
}

/* bar open state */
.djo-share-menu--bar-open .djo-share-menu__trigger {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.5);
}

.djo-share-menu--bar-open .djo-share-menu__bar {
  width: auto;
  opacity: 1;
  pointer-events: auto;
}