@layer components {
  .btn-noise {
      position: relative;
      width: 287px;
      height: 36px;
      background: none;
      font-family: "Josefin Sans", sans-serif;
      font-size: 24px;
      cursor: pointer;
      border: none;
      --sy: 0;
      --aps: paused;
      --op: 1;
  
      &::after {
        content: attr(data-content);
        opacity: var(--op, 1);
        transition: opacity 0.4s;
      }
      & > span > i {
        position: absolute;
        left: var(--left, 0);
        top: 50%;
        width: 3px;
        height: 72px;
        transform: translateY(-50%) scaleY(var(--sy, 0));
        transition: transform var(--duration) ease-out;
  
        &::after {
          content: " ";
          position: absolute;
          inset: 0;
          background-image: linear-gradient(#fff, hsl(var(--hue, 0), 75%, 75%));
          border-radius: 50%;
          animation: btn-noise var(--duration) infinite ease-in-out alternate;
          animation-play-state: var(--aps, paused);
        }
  
        &:nth-child(1) {
          --left: 0px;
          --duration: 387ms;
          --size: 0.053;
          --hue: 0;
        }
        &:nth-child(2) {
          --left: 4px;
          --duration: 320ms;
          --size: 0.857;
          --hue: 5;
        }
        &:nth-child(3) {
          --left: 8px;
          --duration: 231ms;
          --size: 0.183;
          --hue: 10;
        }
        &:nth-child(4) {
          --left: 12px;
          --duration: 231ms;
          --size: 0.699;
          --hue: 15;
        }
        &:nth-child(5) {
          --left: 16px;
          --duration: 397ms;
          --size: 0.634;
          --hue: 20;
        }
        &:nth-child(6) {
          --left: 20px;
          --duration: 315ms;
          --size: 0.152;
          --hue: 25;
        }
        &:nth-child(7) {
          --left: 24px;
          --duration: 360ms;
          --size: 0.552;
          --hue: 30;
        }
        &:nth-child(8) {
          --left: 28px;
          --duration: 379ms;
          --size: 0.02;
          --hue: 35;
        }
        &:nth-child(9) {
          --left: 32px;
          --duration: 337ms;
          --size: 0.039;
          --hue: 40;
        }
        &:nth-child(10) {
          --left: 36px;
          --duration: 267ms;
          --size: 0.531;
          --hue: 45;
        }
        &:nth-child(11) {
          --left: 40px;
          --duration: 385ms;
          --size: 0.199;
          --hue: 50;
        }
        &:nth-child(12) {
          --left: 44px;
          --duration: 268ms;
          --size: 0.863;
          --hue: 55;
        }
        &:nth-child(13) {
          --left: 48px;
          --duration: 370ms;
          --size: 0.334;
          --hue: 60;
        }
        &:nth-child(14) {
          --left: 52px;
          --duration: 266ms;
          --size: 0.951;
          --hue: 65;
        }
        &:nth-child(15) {
          --left: 56px;
          --duration: 340ms;
          --size: 0.841;
          --hue: 70;
        }
        &:nth-child(16) {
          --left: 60px;
          --duration: 255ms;
          --size: 0.388;
          --hue: 75;
        }
        &:nth-child(17) {
          --left: 64px;
          --duration: 222ms;
          --size: 0.184;
          --hue: 80;
        }
        &:nth-child(18) {
          --left: 68px;
          --duration: 390ms;
          --size: 0.383;
          --hue: 85;
        }
        &:nth-child(19) {
          --left: 72px;
          --duration: 370ms;
          --size: 0.974;
          --hue: 90;
        }
        &:nth-child(20) {
          --left: 76px;
          --duration: 285ms;
          --size: 0.478;
          --hue: 95;
        }
        &:nth-child(21) {
          --left: 80px;
          --duration: 252ms;
          --size: 0.402;
          --hue: 100;
        }
        &:nth-child(22) {
          --left: 84px;
          --duration: 298ms;
          --size: 0.567;
          --hue: 105;
        }
        &:nth-child(23) {
          --left: 88px;
          --duration: 389ms;
          --size: 0.926;
          --hue: 110;
        }
        &:nth-child(24) {
          --left: 92px;
          --duration: 368ms;
          --size: 0.137;
          --hue: 115;
        }
        &:nth-child(25) {
          --left: 96px;
          --duration: 219ms;
          --size: 0.111;
          --hue: 120;
        }
        &:nth-child(26) {
          --left: 100px;
          --duration: 344ms;
          --size: 0.12;
          --hue: 125;
        }
        &:nth-child(27) {
          --left: 104px;
          --duration: 329ms;
          --size: 0.368;
          --hue: 130;
        }
        &:nth-child(28) {
          --left: 108px;
          --duration: 241ms;
          --size: 0.316;
          --hue: 135;
        }
        &:nth-child(29) {
          --left: 112px;
          --duration: 393ms;
          --size: 0.463;
          --hue: 140;
        }
        &:nth-child(30) {
          --left: 116px;
          --duration: 304ms;
          --size: 0.372;
          --hue: 145;
        }
        &:nth-child(31) {
          --left: 120px;
          --duration: 300ms;
          --size: 0.39;
          --hue: 150;
        }
        &:nth-child(32) {
          --left: 124px;
          --duration: 366ms;
          --size: 0.785;
          --hue: 155;
        }
        &:nth-child(33) {
          --left: 128px;
          --duration: 337ms;
          --size: 0.499;
          --hue: 160;
        }
        &:nth-child(34) {
          --left: 132px;
          --duration: 262ms;
          --size: 0.724;
          --hue: 165;
        }
        &:nth-child(35) {
          --left: 136px;
          --duration: 230ms;
          --size: 0.406;
          --hue: 170;
        }
        &:nth-child(36) {
          --left: 140px;
          --duration: 333ms;
          --size: 0.057;
          --hue: 175;
        }
        &:nth-child(37) {
          --left: 144px;
          --duration: 348ms;
          --size: 0.347;
          --hue: 180;
        }
        &:nth-child(38) {
          --left: 148px;
          --duration: 229ms;
          --size: 0.683;
          --hue: 185;
        }
        &:nth-child(39) {
          --left: 152px;
          --duration: 240ms;
          --size: 0.072;
          --hue: 190;
        }
        &:nth-child(40) {
          --left: 156px;
          --duration: 325ms;
          --size: 0.557;
          --hue: 195;
        }
        &:nth-child(41) {
          --left: 160px;
          --duration: 304ms;
          --size: 0.42;
          --hue: 200;
        }
        &:nth-child(42) {
          --left: 164px;
          --duration: 202ms;
          --size: 0.406;
          --hue: 205;
        }
        &:nth-child(43) {
          --left: 168px;
          --duration: 383ms;
          --size: 0.818;
          --hue: 210;
        }
        &:nth-child(44) {
          --left: 172px;
          --duration: 362ms;
          --size: 0.09;
          --hue: 215;
        }
        &:nth-child(45) {
          --left: 176px;
          --duration: 393ms;
          --size: 0.61;
          --hue: 220;
        }
        &:nth-child(46) {
          --left: 180px;
          --duration: 287ms;
          --size: 0.166;
          --hue: 225;
        }
        &:nth-child(47) {
          --left: 184px;
          --duration: 333ms;
          --size: 0.472;
          --hue: 230;
        }
        &:nth-child(48) {
          --left: 188px;
          --duration: 223ms;
          --size: 0.035;
          --hue: 235;
        }
        &:nth-child(49) {
          --left: 192px;
          --duration: 310ms;
          --size: 0.117;
          --hue: 240;
        }
        &:nth-child(50) {
          --left: 196px;
          --duration: 220ms;
          --size: 0.943;
          --hue: 245;
        }
        &:nth-child(51) {
          --left: 200px;
          --duration: 219ms;
          --size: 0.221;
          --hue: 250;
        }
        &:nth-child(52) {
          --left: 204px;
          --duration: 274ms;
          --size: 0.555;
          --hue: 255;
        }
        &:nth-child(53) {
          --left: 208px;
          --duration: 339ms;
          --size: 0.712;
          --hue: 260;
        }
        &:nth-child(54) {
          --left: 212px;
          --duration: 214ms;
          --size: 0.857;
          --hue: 265;
        }
        &:nth-child(55) {
          --left: 216px;
          --duration: 215ms;
          --size: 0.565;
          --hue: 270;
        }
        &:nth-child(56) {
          --left: 220px;
          --duration: 247ms;
          --size: 0.684;
          --hue: 275;
        }
        &:nth-child(57) {
          --left: 224px;
          --duration: 283ms;
          --size: 0.134;
          --hue: 280;
        }
        &:nth-child(58) {
          --left: 228px;
          --duration: 362ms;
          --size: 0.734;
          --hue: 285;
        }
        &:nth-child(59) {
          --left: 232px;
          --duration: 363ms;
          --size: 0.622;
          --hue: 290;
        }
        &:nth-child(60) {
          --left: 236px;
          --duration: 396ms;
          --size: 0.095;
          --hue: 295;
        }
        &:nth-child(61) {
          --left: 240px;
          --duration: 245ms;
          --size: 0.847;
          --hue: 300;
        }
        &:nth-child(62) {
          --left: 244px;
          --duration: 278ms;
          --size: 0.169;
          --hue: 305;
        }
        &:nth-child(63) {
          --left: 248px;
          --duration: 375ms;
          --size: 0.185;
          --hue: 310;
        }
        &:nth-child(64) {
          --left: 252px;
          --duration: 392ms;
          --size: 0.357;
          --hue: 315;
        }
        &:nth-child(65) {
          --left: 256px;
          --duration: 315ms;
          --size: 0.284;
          --hue: 320;
        }
        &:nth-child(66) {
          --left: 260px;
          --duration: 215ms;
          --size: 0.508;
          --hue: 325;
        }
        &:nth-child(67) {
          --left: 264px;
          --duration: 372ms;
          --size: 0.019;
          --hue: 330;
        }
        &:nth-child(68) {
          --left: 268px;
          --duration: 232ms;
          --size: 0.906;
          --hue: 335;
        }
        &:nth-child(69) {
          --left: 272px;
          --duration: 262ms;
          --size: 0.974;
          --hue: 340;
        }
        &:nth-child(70) {
          --left: 276px;
          --duration: 349ms;
          --size: 0.302;
          --hue: 345;
        }
        &:nth-child(71) {
          --left: 280px;
          --duration: 293ms;
          --size: 1;
          --hue: 350;
        }
        &:nth-child(72) {
          --left: 284px;
          --duration: 315ms;
          --size: 0.186;
          --hue: 355;
        }
  
      }
  
      &:hover {
        border: none;
        --sy: 1;
        --aps: running;
        --op: 0;
      }
    }

  @keyframes btn-noise {
      0% {
        transform: scaleY(calc(1 - (var(--size, 0))));
      }
      100% {
        transform: scaleY(calc(1 + (var(--size, 0))));
      }
    }
}