@use "../../assets/stylesheets/base/colors" as *;

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

button {
  background: radial-gradient(
      35.83% 70.83% at 0% 0%,
      rgba(93, 52, 69, 0.15) 0%,
      rgba(161, 183, 254, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #111;
  border-radius: 37.5px;
  color: $color-text-primary;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 2px solid transparent;
  position: relative;
  background-clip: padding-box;

  &:after {
    background: none;
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    background: linear-gradient(
        172.29deg,
        rgba(241, 161, 254, 0.3) 6.23%,
        rgba(161, 183, 254, 0) 94.36%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(170, 170, 170, 0.04) 100%
      );
    content: "";
    z-index: -1;
    border-radius: 37.5px;
  }

  &:hover {
    background: linear-gradient(
        180deg,
        rgba(194, 64, 118, 0.25) 0%,
        rgba(0, 40, 170, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      #111;
    background-clip: padding-box;
    background-size: 100% 100%;

    &:after {
      background: none;
    }
  }
}

// @property --a {
//   syntax: "<angle>";
//   inherits: false;
//   initial-value: 90deg;
// }
// @property --l {
//   syntax: "<percentage>";
//   inherits: false;
//   initial-value: 10%;
// }
// @property --c {
//   syntax: "<color>";
//   inherits: false;
//   initial-value: red;
// }

// button {
//   /*  needed for firefox to have a valid output */
//   --a: 80deg;
//   --l: 10%;
//   --c: red;
//   /**/
//   cursor: pointer;
//   height: 200px;
//   transition: --a 0.5s 0.1s, --l 0.5s, --c 0.8s;
//   background: linear-gradient(
//     var(--a),
//     var(--c) var(--l),
//     blue,
//     var(--c) calc(100% - var(--l))
//   );
// }
// button:hover {
//   --a: 360deg;
//   --l: 40%;
//   --c: green;
// }
