.glyph-navigation > .glyph-action:has(.action-emblem) {
  --action-laser-a: #7ef9ff;
  --action-laser-b: #c084fc;
  --action-laser-a-rgb: 126 249 255;
  --action-laser-b-rgb: 192 132 252;

  align-items: center;
  animation: none;
  color: inherit;
  display: inline-flex;
  gap: 0.42em;
}

.glyph-action__label {
  display: inline-block;
  line-height: 1.1;
}

.action-emblem {
  --action-emblem-a: var(--action-laser-a, #7ef9ff);
  --action-emblem-b: var(--action-laser-b, #c084fc);
  --action-emblem-a-rgb: var(--action-laser-a-rgb, 126 249 255);
  --action-emblem-b-rgb: var(--action-laser-b-rgb, 192 132 252);

  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  flex: 0 0 1.4em;
  height: 1.4em;
  isolation: isolate;
  justify-content: center;
  opacity: 0.84;
  pointer-events: none;
  position: relative;
  transform: none;
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
  user-select: none;
  vertical-align: middle;
  width: 1.4em;
}

.action-emblem::before {
  background:
    radial-gradient(
      circle at 38% 34%,
      rgb(var(--action-emblem-a-rgb) / 0.19),
      transparent 42%
    ),
    radial-gradient(
      circle,
      rgb(var(--action-emblem-b-rgb) / 0.1),
      rgb(4 8 20 / 0.34) 52%,
      transparent 72%
    );
  border: 1px solid rgb(var(--action-emblem-b-rgb) / 0.2);
  border-radius: 50%;
  content: '';
  inset: 0.06em;
  opacity: 0.62;
  pointer-events: none;
  position: absolute;
  transform: scale(0.9);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
  z-index: 0;
}

.action-emblem__svg {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  max-block-size: 100%;
  max-inline-size: 100%;
  overflow: visible;
  pointer-events: none;
  position: relative;
  shape-rendering: geometricPrecision;
  z-index: 1;
}

.action-emblem__svg *,
.action-emblem__svg *::before,
.action-emblem__svg *::after {
  pointer-events: none;
}

.action-emblem__rail,
.action-emblem__beam,
.action-emblem__core,
.action-emblem__glass,
.action-emblem__ghost,
.action-emblem__spark {
  paint-order: stroke fill markers;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
  vector-effect: non-scaling-stroke;
}

.action-emblem__rail {
  fill: none;
  opacity: 0.56;
  stroke: var(--action-emblem-b);
  stroke-width: 1.2;
}

.action-emblem__beam {
  fill: none;
  opacity: 0.78;
  stroke: var(--action-emblem-a);
  stroke-width: 1.5;
}

.action-emblem__glass {
  fill: rgb(var(--action-emblem-a-rgb) / 0.16);
  opacity: 0.8;
  stroke: var(--action-emblem-b);
  stroke-width: 0.9;
}

.action-emblem__ghost {
  fill: rgb(var(--action-emblem-b-rgb) / 0.08);
  opacity: 0.38;
  stroke: rgb(var(--action-emblem-a-rgb) / 0.68);
  stroke-width: 0.72;
}

.action-emblem__core {
  fill: rgb(255 255 255 / 0.96);
  opacity: 0.94;
  stroke: var(--action-emblem-a);
  stroke-width: 0.72;
}

.action-emblem__spark {
  fill: #fff;
  opacity: 0.9;
  stroke: var(--action-emblem-b);
  stroke-width: 0.64;
}


.action-emblem:has(.action-emblem__svg--pray),
.action-emblem__svg--pray {
  --action-emblem-a: #a98bff;
  --action-emblem-b: #65f4ff;
  --action-emblem-a-rgb: 169 139 255;
  --action-emblem-b-rgb: 101 244 255;
}

.action-emblem:has(.action-emblem__svg--encourage),
.action-emblem__svg--encourage {
  --action-emblem-a: #ff70ad;
  --action-emblem-b: #ffd76a;
  --action-emblem-a-rgb: 255 112 173;
  --action-emblem-b-rgb: 255 215 106;
}

.action-emblem:has(.action-emblem__svg--save),
.action-emblem__svg--save {
  --action-emblem-a: #ffe46b;
  --action-emblem-b: #56eaff;
  --action-emblem-a-rgb: 255 228 107;
  --action-emblem-b-rgb: 86 234 255;
}

.action-emblem:has(.action-emblem__svg--raise),
.action-emblem__svg--raise {
  --action-emblem-a: #c8f8ff;
  --action-emblem-b: #c28cff;
  --action-emblem-a-rgb: 200 248 255;
  --action-emblem-b-rgb: 194 140 255;
}

.action-emblem:has(.action-emblem__svg--read),
.action-emblem__svg--read {
  --action-emblem-a: #65dcff;
  --action-emblem-b: #8a9bff;
  --action-emblem-a-rgb: 101 220 255;
  --action-emblem-b-rgb: 138 155 255;
}

.action-emblem:has(.action-emblem__svg--infinity),
.action-emblem__svg--infinity {
  --action-emblem-a: #bb70ff;
  --action-emblem-b: #55f5ff;
  --action-emblem-a-rgb: 187 112 255;
  --action-emblem-b-rgb: 85 245 255;
}

.action-emblem:has(.action-emblem__svg--unlock-public),
.action-emblem__svg--unlock-public {
  --action-emblem-a: #ff58d2;
  --action-emblem-b: #ffe264;
  --action-emblem-a-rgb: 255 88 210;
  --action-emblem-b-rgb: 255 226 100;
}

.action-emblem:has(.action-emblem__svg--public-post),
.action-emblem__svg--public-post {
  --action-emblem-a: #ff7898;
  --action-emblem-b: #62f4ca;
  --action-emblem-a-rgb: 255 120 152;
  --action-emblem-b-rgb: 98 244 202;
}

.action-emblem:has(.action-emblem__svg--temperature),
.action-emblem__svg--temperature {
  --action-emblem-a: #ff6279;
  --action-emblem-b: #64eaff;
  --action-emblem-a-rgb: 255 98 121;
  --action-emblem-b-rgb: 100 234 255;
}

.action-emblem:has(.action-emblem__svg--gravity),
.action-emblem__svg--gravity {
  --action-emblem-a: #7f8cff;
  --action-emblem-b: #64ffc7;
  --action-emblem-a-rgb: 127 140 255;
  --action-emblem-b-rgb: 100 255 199;
}

.action-emblem:has(.action-emblem__svg--wallet),
.action-emblem__svg--wallet {
  --action-emblem-a: #ff9a45;
  --action-emblem-b: #57e8ff;
  --action-emblem-a-rgb: 255 154 69;
  --action-emblem-b-rgb: 87 232 255;
}


.glyph-navigation > .glyph-action:is([aria-pressed='true'], .enabled) .action-emblem {
  opacity: 1;
  transform: scale(1.045);
}

.glyph-navigation > .glyph-action:is([aria-pressed='true'], .enabled) .action-emblem::before {
  opacity: 0.9;
  transform: scale(1);
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem {
  opacity: 1;
  transform: scale(1.075);
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem::before {
  opacity: 0.96;
  transform: scale(1.03);
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__rail {
  opacity: 0.82;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) :is(
  .action-emblem__beam,
  .action-emblem__glass,
  .action-emblem__core,
  .action-emblem__spark
) {
  opacity: 1;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__ghost {
  opacity: 0.62;
}

.action-emblem__orbit {
  transform-box: view-box;
  transform-origin: center;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__pulse {
  animation: action-emblem-pulse 1.65s ease-in-out infinite;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__drift {
  animation: action-emblem-drift 2.4s ease-in-out infinite alternate;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__orbit {
  animation: action-emblem-orbit 5.8s linear infinite;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__flicker {
  animation: action-emblem-flicker 1.25s ease-in-out infinite alternate;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__sway {
  animation: action-emblem-sway 2.1s ease-in-out infinite alternate;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__lift {
  animation: action-emblem-lift 1.8s ease-in-out infinite;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):is(
  :hover,
  :focus-visible,
  :active,
  [aria-pressed='true'],
  .enabled
) .action-emblem__sweep {
  animation: action-emblem-sweep 1.9s ease-in-out infinite;
}

.glyph-navigation > .glyph-action:not(:disabled, .disabled):active .action-emblem {
  transform: scale(0.96);
}


.glyph-navigation > .glyph-action.disabled .action-emblem {
  opacity: 0.46;
}

.glyph-navigation > .glyph-action.disabled .action-emblem::before {
  opacity: 0.3;
}

.glyph-navigation > .glyph-action.disabled .action-emblem__rail,
.glyph-navigation > .glyph-action.disabled .action-emblem__beam,
.glyph-navigation > .glyph-action.disabled .action-emblem__glass {
  opacity: 0.42;
}

.glyph-navigation > .glyph-action.disabled .action-emblem__ghost,
.glyph-navigation > .glyph-action.disabled .action-emblem__spark {
  opacity: 0.22;
}

.glyph-navigation > .glyph-action.disabled:is(:hover, :focus-visible, :active) .action-emblem {
  opacity: 0.64;
  transform: scale(1.035);
}

.glyph-navigation > .glyph-action.disabled:active .action-emblem {
  transform: scale(0.96);
}

@keyframes action-emblem-pulse {
  0%, 100% {
    opacity: 0.82;
    transform: scale(0.96);
  }

  52% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes action-emblem-drift {
  from {
    opacity: 0.5;
    transform: translate3d(-0.5px, 0.45px, 0) scale(0.98);
  }

  to {
    opacity: 0.9;
    transform: translate3d(0.6px, -0.5px, 0) scale(1.025);
  }
}

@keyframes action-emblem-orbit {
  from {
    opacity: 0.48;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.9;
  }

  to {
    opacity: 0.48;
    transform: rotate(360deg);
  }
}

@keyframes action-emblem-flicker {
  from {
    opacity: 0.58;
    transform: rotate(-3deg) scale(0.88);
  }

  to {
    opacity: 1;
    transform: rotate(3deg) scale(1.12);
  }
}

@keyframes action-emblem-sway {
  from {
    opacity: 0.68;
    transform: translate3d(-0.3px, 0.15px, 0) rotate(-1.5deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0.3px, -0.15px, 0) rotate(1.5deg);
  }
}

@keyframes action-emblem-lift {
  0%, 100% {
    opacity: 0.72;
    transform: translate3d(0, 0.7px, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, -1px, 0);
  }
}

@keyframes action-emblem-sweep {
  0%, 100% {
    opacity: 0.54;
    transform: translate3d(-0.55px, 0, 0) scale(0.98);
  }

  50% {
    opacity: 1;
    transform: translate3d(0.65px, 0, 0) scale(1.025);
  }
}

@media (max-width: 768px) {
  .action-emblem {
    flex-basis: 1.35em;
    height: 1.35em;
    width: 1.35em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-emblem,
  .action-emblem::before,
  .action-emblem__rail,
  .action-emblem__beam,
  .action-emblem__core,
  .action-emblem__glass,
  .action-emblem__ghost,
  .action-emblem__spark {
    animation: none !important;
    transform: none !important;
    transition: none;
  }
}

@media (forced-colors: active) {
  .action-emblem {
    color: ButtonText;
    forced-color-adjust: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .action-emblem::before {
    background: Canvas;
    border-color: ButtonText;
    opacity: 1;
    transform: none;
  }

  .action-emblem__rail,
  .action-emblem__beam,
  .action-emblem__ghost {
    animation: none !important;
    fill: none;
    opacity: 1;
    stroke: currentColor;
    transform: none;
  }

  .action-emblem__glass {
    animation: none !important;
    fill: Canvas;
    opacity: 1;
    stroke: currentColor;
    transform: none;
  }

  .action-emblem__core,
  .action-emblem__spark {
    animation: none !important;
    fill: Highlight;
    opacity: 1;
    stroke: Highlight;
    transform: none;
  }
}