/*
 * DJO Share Menu — DJO Skin
 *
 * Brand skin for DJO (Turning Point / David Jeremiah).
 * Applied via: DJO_ShareMenu.mount('.el', { skin: 'djo', ... });
 *
 * Load AFTER DJO_ShareMenu.css (structure).
 *
 * Themes:
 *   Default (no theme)       → Modern Blue
 *   theme: 'soft-light'      → Soft Light variant
 *   theme: 'glass'           → Glassmorphism (defined in base CSS)
 */


/* DJO Theme — Modern Blue (Default)
 * Palette drawn from GlobalForm modern-blue:
 *   blue #3b5998 · purple #5b7cc5 · red #d44444 · orange #e8834a
 */
.djo.djo-share-menu {
  /* trigger */
  --share-trigger-bg: #213a8d;
  --share-trigger-text: #ffffff;
  --share-trigger-hover-bg: #2a5298;
  --share-trigger-active-bg: #840c80;

  /* icons */
  --share-icon-color: #3a2f8a;
  --share-icon-hover-scale: 1.25;

  /* tooltip */
  --share-tooltip-bg: #213a8d;
  --share-tooltip-text: #ffffff;

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

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


/* modern-blue: icon colors — DJO brand gradient
 * blue #213a8d → purple #532387 → magenta #840c80 → gold #f9a825
 * distributed via nth-child regardless of icon type */
.djo.djo-share-menu .djo-share-menu__icon:only-child i {
  color: #3a2f8a;
}

/* 2 icons */
.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(2) i {
  color: #213a8d;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(2)~.djo-share-menu__icon i {
  color: #f9a825;
}

/* 3 icons */
.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(3) i {
  color: #213a8d;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(3)~.djo-share-menu__icon:nth-child(2) i {
  color: #840c80;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(3)~.djo-share-menu__icon:nth-child(3) i {
  color: #f9a825;
}

/* 4 icons */
.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(4) i {
  color: #213a8d;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(4)~.djo-share-menu__icon:nth-child(2) i {
  color: #532387;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(4)~.djo-share-menu__icon:nth-child(3) i {
  color: #840c80;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(4)~.djo-share-menu__icon:nth-child(4) i {
  color: #f9a825;
}

/* 5 icons */
.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(5) i {
  color: #213a8d;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(5)~.djo-share-menu__icon:nth-child(2) i {
  color: #3a2f8a;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(5)~.djo-share-menu__icon:nth-child(3) i {
  color: #6b2d8b;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(5)~.djo-share-menu__icon:nth-child(4) i {
  color: #840c80;
}

.djo.djo-share-menu .djo-share-menu__icon:first-child:nth-last-child(5)~.djo-share-menu__icon:nth-child(5) i {
  color: #f9a825;
}


/* modern-blue: trigger ring on hover */
.djo.djo-share-menu .djo-share-menu__trigger:hover {
  box-shadow: 0 0 0 3px rgba(33, 58, 141, 0.2);
}


/* –––––––––––––––––––––––––––––––––––––––––––––– */


/* DJO Theme — Soft Light Variant */
.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] {
  /* trigger */
  --share-trigger-bg: #4a6fa5;
  --share-trigger-text: #ffffff;
  --share-trigger-hover-bg: #3e5f90;
  --share-trigger-active-bg: #d46555;

  /* icons */
  --share-icon-color: #4a6fa5;
  --share-icon-hover-scale: 1.2;

  /* tooltip */
  --share-tooltip-bg: #4a6fa5;
  --share-tooltip-text: #ffffff;

  /* sizing */
  --share-trigger-size: 40px;
  --share-trigger-font-size: 16px;
  --share-icon-font-size: 24px;

  /* effects */
  --share-transition: 0.25s ease;
  --share-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --share-shadow: drop-shadow(0 2px 8px rgba(40, 48, 68, 0.2));
}


/* soft-light: per-platform icon colors (muted palette) */
.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__icon--facebook i {
  color: #5a8abf;
}

.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__icon--x i {
  color: #3d4654;
}

.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__icon--email i {
  color: #7b9cc7;
}

.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__icon--text i {
  color: #4a9c6d;
}

.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__icon--copy i {
  color: #8e95a5;
}


/* soft-light: trigger ring on hover */
.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__trigger:hover {
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
}


/* soft-light: gentler tooltip radius */
.djo.djo-share-menu.djo-share-menu[data-theme="soft-light"] .djo-share-menu__tooltip {
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
}


/* ────────────────────────────────────────────── */


/* bar mode: icon colors are white on the colored bar background */
.djo.djo-share-menu.djo-share-menu--bar .djo-share-menu__bar-icons .djo-share-menu__icon i {
  color: #fff !important;
}

.djo.djo-share-menu.djo-share-menu--bar .djo-share-menu__bar-icons .djo-share-menu__icon:hover i {
  color: rgba(255, 255, 255, 0.8) !important;
}


/* ────────────────────────────────────────────── */


/* DJO Theme — Glass Variant */
.djo.djo-share-menu[data-theme="glass"] {
  --share-trigger-bg: rgba(255, 255, 255, 0.15);
  --share-trigger-text: rgb(var(--rgb-light, 255, 255, 255));
  --share-trigger-hover-bg: rgba(255, 255, 255, 0.25);
  --share-trigger-active-bg: rgba(255, 255, 255, 0.25);
  --share-icon-color: rgba(255, 255, 255, 0.9);
  --share-tooltip-bg: rgba(0, 0, 0, 0.6);
  --share-tooltip-text: #fff;
  --share-shadow: none;
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__trigger {
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__trigger:hover {
  box-shadow: none;
}


.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__icon i {
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

/* glass: bar mode */
.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__bar {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__bar-close {
  color: rgba(255, 255, 255, 0.5);
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__bar-close:hover {
  color: #fff;
}

/* glass: overlay mode */
.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__overlay-panel {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__overlay-heading {
  color: #fff;
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__overlay-close {
  color: rgba(255, 255, 255, 0.5);
}

.djo.djo-share-menu[data-theme="glass"] .djo-share-menu__overlay-close:hover {
  color: #fff;
}