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

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

button {
  &.btn {
    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;
// }