.w3s-button {
  position: relative;
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
}

.w3s-button__inner {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: #101010;
  --highlight-color-hue: 150deg;

  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.6em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 1em;
  font-weight: 400;
  background-color: var(--button-color);
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.2),
    inset 0px 2px 2px rgba(255, 255, 255, 0.15),
    inset 0px 4px 4px rgba(255, 255, 255, 0.1),
    inset 0px 8px 8px rgba(255, 255, 255, 0.05),
    inset 0px 16px 16px rgba(255, 255, 255, 0.05),
    0px -1px 1px rgba(0, 0, 0, 0.02),
    0px -2px 2px rgba(0, 0, 0, 0.03),
    0px -4px 4px rgba(0, 0, 0, 0.05),
    0px -8px 8px rgba(0, 0, 0, 0.06),
    0px -16px 16px rgba(0, 0, 0, 0.08);
  border: solid 1px #ffffff33;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition);
  position: relative;
}

.w3s-button__inner::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition:
    box-shadow var(--transition),
    filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #0000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.w3s-button__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(
    130% 80% at 50% 100%,
    hsla(var(--highlight-color-hue), 100%, 78%, 0.95),
    hsla(var(--highlight-color-hue), 100%, 65%, 0.7),
    hsla(var(--highlight-color-hue), 100%, 40%, 0.15),
    transparent 70%
  );
  background-size: 100% 100%;
  background-position: 50% 100%;
  opacity: 0;
  transition:
    opacity var(--transition),
    filter var(--transition);
}

.w3s-button__letter {
  position: relative;
  display: inline-block;
  color: #ffffff55;
  animation: w3s-button-letter 2s ease-in-out infinite;
  transition:
    color var(--transition),
    text-shadow var(--transition),
    opacity var(--transition);
}

@keyframes w3s-button-letter {
  50% {
    text-shadow: 0 0 3px #fff8;
    color: #fff;
  }
}

.w3s-button__icon {
  flex-grow: 0;
  flex-shrink: 0;
  height: 24px;
  margin-right: 0.5rem;
  fill: #e8e8e8;
  animation: w3s-button-flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px #fff9);
  transition:
    fill var(--transition),
    filter var(--transition),
    opacity var(--transition);
}

@keyframes w3s-button-flicker {
  50% {
    opacity: 0.3;
  }
}

.w3s-button__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 6.4em;
  white-space: nowrap;
  color: #f9fafb;
}

.w3s-button__text-primary,
.w3s-button__text-secondary {
  position: absolute;
  word-spacing: -1em;
}

.w3s-button__text-primary {
  animation: w3s-button-appear 1s ease-in-out forwards;
}

.w3s-button__text-secondary {
  opacity: 0;
}

@keyframes w3s-button-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.w3s-button__inner:focus .w3s-button__text-primary {
  animation: w3s-button-opacity 0.3s ease-in-out forwards;
  animation-delay: 1s;
}

.w3s-button__inner:focus .w3s-button__text-secondary {
  animation: w3s-button-opacity 0.3s ease-in-out reverse forwards;
  animation-delay: 1s;
}

@keyframes w3s-button-opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.w3s-button__inner:focus .w3s-button__letter {
  animation:
    w3s-button-letter-focus 1s ease-in-out forwards,
    w3s-button-letter 1.2s ease-in-out infinite;
  animation-delay: 0s, 1s;
}

@keyframes w3s-button-letter-focus {
  0%,
  100% {
    filter: blur(0px);
  }
  50% {
    transform: scale(2);
    filter: blur(10px) brightness(150%)
      drop-shadow(
        -36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)
      );
  }
}

.w3s-button__inner:focus .w3s-button__icon {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}

.w3s-button__inner:focus::before {
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.2) inset,
    1px 1px 1px #fff3,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.w3s-button__inner:focus::after {
  opacity: 0.6;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(100%);
}

.w3s-button__inner:active {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}

.w3s-button__inner:active::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.w3s-button__inner:active::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}

.w3s-button__inner:active .w3s-button__letter {
  text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
  animation: none;
}

.w3s-button__inner:hover {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
}

.w3s-button__inner:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.w3s-button__inner:hover::after {
  opacity: 1;
  mask-image: linear-gradient(180deg, transparent, #fff);
  animation: none;
}

.w3s-button__inner:hover .w3s-button__icon {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}

.w3s-button__inner:hover .w3s-button__letter {
  color: hsl(var(--highlight-color-hue), 100%, 88%);
  text-shadow:
    0 0 4px hsla(var(--highlight-color-hue), 100%, 80%, 0.9),
    0 0 10px hsla(var(--highlight-color-hue), 100%, 70%, 0.9);
}

@keyframes w3s-button-glow {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}