.p3d-icon {
  --p3d-a: #8b54f7;
  --p3d-b: #4c20c8;
  --p3d-shadow: rgba(83, 42, 192, .3);
  --p3d-size: 34px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--p3d-size);
  height: var(--p3d-size);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 28%;
  vertical-align: middle;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), rgba(255,255,255,.08) 27%, transparent 31%),
    linear-gradient(145deg, var(--p3d-a) 4%, var(--p3d-b) 88%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -4px 8px rgba(26,9,83,.22),
    0 4px 8px var(--p3d-shadow),
    0 1px 2px rgba(25,18,68,.22);
  transform: translateZ(0);
}

.p3d-icon::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4%;
  left: 12%;
  width: 72%;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: rotate(-9deg);
  pointer-events: none;
}

.p3d-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: 6%;
  width: 35%;
  height: 14%;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  filter: blur(2px);
  pointer-events: none;
}

.p3d-icon img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: .98;
  filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(30,12,84,.26));
}

.p3d-icon[data-tone="blue"] {
  --p3d-a: #65b9ff; --p3d-b: #1763d8; --p3d-shadow: rgba(28,100,214,.28);
}
.p3d-icon[data-tone="green"] {
  --p3d-a: #68db82; --p3d-b: #169044; --p3d-shadow: rgba(26,143,67,.28);
}
.p3d-icon[data-tone="orange"] {
  --p3d-a: #ffc34f; --p3d-b: #f06e0c; --p3d-shadow: rgba(229,107,15,.3);
}
.p3d-icon[data-tone="pink"] {
  --p3d-a: #ff80b2; --p3d-b: #df2e72; --p3d-shadow: rgba(218,43,109,.27);
}
.p3d-icon[data-tone="red"] {
  --p3d-a: #ff7770; --p3d-b: #d72f33; --p3d-shadow: rgba(206,43,47,.26);
}
.p3d-icon[data-tone="teal"] {
  --p3d-a: #67e3dc; --p3d-b: #098b94; --p3d-shadow: rgba(8,133,143,.27);
}
.p3d-icon[data-tone="navy"] {
  --p3d-a: #606fdc; --p3d-b: #18236f; --p3d-shadow: rgba(27,38,111,.3);
}
.p3d-icon[data-tone="gold"] {
  --p3d-a: #ffe06b; --p3d-b: #e49a05; --p3d-shadow: rgba(206,139,3,.3);
}

.p3d-icon[data-size="xs"] { --p3d-size: 20px; border-radius: 6px; }
.p3d-icon[data-size="sm"] { --p3d-size: 27px; }
.p3d-icon[data-size="md"] { --p3d-size: 34px; }
.p3d-icon[data-size="lg"] { --p3d-size: 48px; }
.p3d-icon[data-size="xl"] { --p3d-size: 68px; }
.p3d-icon[data-size="hero"] { --p3d-size: 82px; }

.p3d-icon.is-flat {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.p3d-icon.is-flat::before,
.p3d-icon.is-flat::after { display: none; }
.p3d-icon.is-flat img { width: 84%; height: 84%; filter: none; }