.btn-wrapper {
  position: relative;
  display: inline-block;
}
.btn {
  --border-radius-btn: 0.5em;
  --padding: 4px;
  --transition: 0.4s;
  --highlight-color-hue: 120deg;

  user-select: none;
  display: flex;
  justify-content: center;
  padding: 0.5em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  background: var(--button-bg);
  box-shadow: var(--button-shadow);

  border-bottom: 2px solid hsla(120, 100%, 50%, 0.4);
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  color: var(--btn-text-color);
  text-shadow:
    -0.5px -0.5px 0 var(--secondary-text-color),
    0.5px -0.5px 0 var(--secondary-text-color),
    -0.5px  0.5px 0 var(--secondary-text-color),
    0.5px  0.5px 0 var(--secondary-text-color);
  transition:
    box-shadow var(--transition),
    border var(--transition),
    color var(--transition),
    background-color var(--transition);
}
.btn::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-btn) + 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 #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--highlight-color-hue), 100%, 70%),
    hsla(var(--highlight-color-hue), 100%, 70%, 50%),
    8%,
    transparent
  );
  background-position: 0 0;
  opacity: 0;
  transition:
    opacity var(--transition),
    filter var(--transition);
}
.btn:focus::before {
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset,
    1px 1px 1px #fff3,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:focus::after {
  opacity: 0.6;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(100%);
}
/* Active state */
.btn:active {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}
.btn:active::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:active::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}
/* Hover state */
.btn:hover {
  border: solid 2px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
  color: var(--secondary-text-color);
  text-shadow:
    -0.5px -0.5px 0 #000000,
    0.5px -0.5px 0 #000000,
    -0.5px  0.5px 0 #000000,
    0.5px  0.5px 0 #000000;
}
.btn:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:hover::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
}

@media  (max-width: 768px) {
  .btn {
    border-bottom: 1px solid hsla(120, 100%, 50%, 0.4);
    border-top: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    border-left: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    border-right: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    font-size: 1rem;
    padding: 0.6em;
  }
  .btn:hover {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
  }
}

@media  (max-width: 908px) {
  .btn {
    border-bottom: 1px solid hsla(120, 100%, 50%, 0.4);
    border-top: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    border-left: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    border-right: 1px solid hsla(var(--highlight-color-hue), 100%, 80%, 40%);
    font-size: 1rem;
    padding: 0.6em;
  }
  .btn:hover {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
  }
}