.products-chest-icon-wrapper {
  width: 100%;
  height: 100%;
  display: block;
}

.products-chest-icon-component {
  width: 100%;
  height: 100%;
  display: block;
}

.products-chest-icon-component svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.products-chest-icon-lid {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.products-chest-icon-interior {
  transition: opacity 0.35s ease;
}

.products-chest-icon-gem {
  transform-box: view-box;
  transform-origin: center center;
  transform: translateY(50%);
  transition:
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.12s,
    filter 0.35s ease;
  filter: drop-shadow(0 0 0.24rem rgba(255, 255, 255, 0.18));
}

.products-chest-icon-gem-main,
.products-chest-icon-gem-facet {
  display: none;
}

.products-chest-icon-gem-core {
  fill: rgba(247, 251, 255, 0.92);
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 0.42;
}

.products-chest-icon-gem-sparkle {
  opacity: 0.14;
  transform-box: fill-box;
  transform-origin: center center;
}

.products-chest-icon-gem-sparkle-line {
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 0.42;
}

.products-chest-icon-component.products-chest-icon-active .products-chest-icon-interior {
  opacity: 1;
}

.products-chest-icon-component.products-chest-icon-active .products-chest-icon-gem {
  filter: drop-shadow(0 0 0.4rem rgba(255, 255, 255, 0.24));
}

.products-chest-icon-component.products-chest-icon-active .products-chest-icon-gem-sparkle {
  animation: products-chest-icon-twinkle 2s ease-in-out 0.7s infinite;
}

@keyframes products-chest-icon-twinkle {
  0%,
  100% {
    opacity: 0.16;
  }

  50% {
    opacity: 0.92;
  }
}