.gbe-gradient-border-enabled-yes {
  position: relative;
  isolation: isolate;
  --gbe-border-width: 2px;
  --gbe-angle: 90deg;
  --gbe-animation-speed: 6s;
  --gbe-transition-speed: 0.35s;
  --gbe-hover-expand: 0px;
  --gbe-glow-size: 0px;
  --gbe-glow-opacity: 0.2;
  --gbe-hover-glow-size: 12px;
  --gbe-hover-glow-opacity: 0.35;

  --gbe-color-1: #ff6a00;
  --gbe-color-2: #ff2d55;
  --gbe-color-3: #8b5cf6;

  --gbe-gradient-stop-1: var(--gbe-color-1, #ff6a00);
  --gbe-gradient-stop-2: var(--gbe-color-2, #ff2d55);
  --gbe-gradient-stop-3: var(--gbe-color-3, #8b5cf6);
  --gbe-gradient-stop-4: var(--gbe-color-4, var(--gbe-gradient-stop-3));
  --gbe-gradient-stop-5: var(--gbe-color-5, var(--gbe-gradient-stop-4));

  --gbe-hover-stop-1: var(--gbe-hover-color-1, var(--gbe-gradient-stop-1));
  --gbe-hover-stop-2: var(--gbe-hover-color-2, var(--gbe-gradient-stop-2));
  --gbe-hover-stop-3: var(--gbe-hover-color-3, var(--gbe-gradient-stop-3));
  --gbe-hover-stop-4: var(--gbe-hover-color-4, var(--gbe-gradient-stop-4));
  --gbe-hover-stop-5: var(--gbe-hover-color-5, var(--gbe-gradient-stop-5));
}

.gbe-gradient-border-enabled-yes::before,
.gbe-gradient-border-enabled-yes::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--gbe-border-radius, inherit);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  transition:
    inset var(--gbe-transition-speed) ease,
    opacity var(--gbe-transition-speed) ease,
    filter var(--gbe-transition-speed) ease,
    background-image var(--gbe-transition-speed) ease;
}

.gbe-gradient-border-enabled-yes::before {
  inset: 0;
  padding: var(--gbe-border-width);
  z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.gbe-gradient-border-enabled-yes::after {
  inset: calc(var(--gbe-border-width) * -1);
  filter: blur(var(--gbe-glow-size));
  opacity: var(--gbe-glow-opacity);
  z-index: 0;
}

.gbe-gradient-border-enabled-yes > * {
  position: relative;
  z-index: 2;
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-linear::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-linear::after {
  background-image: linear-gradient(
    var(--gbe-angle),
    var(--gbe-gradient-stop-1),
    var(--gbe-gradient-stop-2),
    var(--gbe-gradient-stop-3),
    var(--gbe-gradient-stop-4),
    var(--gbe-gradient-stop-5)
  );
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-radial::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-radial::after {
  background-image: radial-gradient(
    circle,
    var(--gbe-gradient-stop-1),
    var(--gbe-gradient-stop-2),
    var(--gbe-gradient-stop-3),
    var(--gbe-gradient-stop-4),
    var(--gbe-gradient-stop-5)
  );
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-conic::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-conic::after {
  background-image: conic-gradient(
    from var(--gbe-angle),
    var(--gbe-gradient-stop-1),
    var(--gbe-gradient-stop-2),
    var(--gbe-gradient-stop-3),
    var(--gbe-gradient-stop-4),
    var(--gbe-gradient-stop-5)
  );
}

.gbe-gradient-border-enabled-yes:hover::before {
  inset: calc(var(--gbe-hover-expand) * -1);
}

.gbe-gradient-border-enabled-yes:hover::after {
  inset: calc((var(--gbe-border-width) * -1) - var(--gbe-hover-expand));
  filter: blur(var(--gbe-hover-glow-size));
  opacity: var(--gbe-hover-glow-opacity);
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-linear:hover::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-linear:hover::after {
  background-image: linear-gradient(
    var(--gbe-angle),
    var(--gbe-hover-stop-1),
    var(--gbe-hover-stop-2),
    var(--gbe-hover-stop-3),
    var(--gbe-hover-stop-4),
    var(--gbe-hover-stop-5)
  );
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-radial:hover::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-radial:hover::after {
  background-image: radial-gradient(
    circle,
    var(--gbe-hover-stop-1),
    var(--gbe-hover-stop-2),
    var(--gbe-hover-stop-3),
    var(--gbe-hover-stop-4),
    var(--gbe-hover-stop-5)
  );
}

.gbe-gradient-border-enabled-yes.gbe-gradient-type-conic:hover::before,
.gbe-gradient-border-enabled-yes.gbe-gradient-type-conic:hover::after {
  background-image: conic-gradient(
    from var(--gbe-angle),
    var(--gbe-hover-stop-1),
    var(--gbe-hover-stop-2),
    var(--gbe-hover-stop-3),
    var(--gbe-hover-stop-4),
    var(--gbe-hover-stop-5)
  );
}

.gbe-gradient-border-enabled-yes.gbe-animate-yes::before,
.gbe-gradient-border-enabled-yes.gbe-animate-yes::after {
  animation: gbeGradientMove var(--gbe-animation-speed) linear infinite;
}

.gbe-gradient-border-enabled-yes.gbe-animate-yes.gbe-hover-only-anim-yes::before,
.gbe-gradient-border-enabled-yes.gbe-animate-yes.gbe-hover-only-anim-yes::after {
  animation-play-state: paused;
}

.gbe-gradient-border-enabled-yes.gbe-animate-yes.gbe-hover-only-anim-yes:hover::before,
.gbe-gradient-border-enabled-yes.gbe-animate-yes.gbe-hover-only-anim-yes:hover::after {
  animation-play-state: running;
}

@keyframes gbeGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}