@property --color{syntax:"<color>";initial-value:rgba(19,29,41,0);inherits:false}.button{background:transparent;border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline;&.button--square{align-items:center;background:linear-gradient(to right,var(--color),var(--color)),linear-gradient(-45deg,var(--orange-gradient-double-reverse));background-position-x:205%;background-position-x:1%;background-size:140% 100%;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 3px transparent;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:500;justify-content:center;line-height:1.375;max-width:335px;padding:16px;position:relative;text-align:center;transform:scale(1);transition:background-position-x .2s ease,--color .2s ease,transform .2s ease,box-shadow .2s ease,padding .2s ease;width:100%;& span{transition:transform .15s linear}&:hover:not(:active){background-position-x:15%;background-position-x:30%;box-shadow:0 2px 3px rgba(0,0,0,.3);transform:translateY(-1px)!important}&:active{--color:rgba(19,29,41,0)!important;box-shadow:0 0 0 transparent;transform:translateY(0)!important}&:active,&:focus{transition:background-position-x .8s ease,--color .2s ease,transform .2s ease,box-shadow .2s ease,padding .2s ease}&:focus:not(:active){box-shadow:0 0 0 transparent;transform:translateY(0)}&.button--white{background:transparent;background-color:transparent;border:1px solid #fff;transition:background .2s ease,color .2s ease,transform .2s ease;&:hover{background-color:#fff;color:var(--dark)}&:active{background-color:#f0f0f0}}&.button--black{background:transparent;border:1px solid var(--dark);color:var(--dark);transition:background-color .2s ease,color .2s ease,transform .2s ease;&:hover{background-color:var(--dark);color:#fff}&:active{background-color:color-mix(var(--dark),#fff 10%)}}}&.button--pill{backdrop-filter:blur(5px);background:#fcfdfe;border-radius:50px;color:var(--orange);font-size:20px;font-weight:500;line-height:1.1;padding:12px 20px 12px 60px;position:relative;text-align:center;&>*{left:0;position:relative;transition:left .25s ease-in,color .25s ease;z-index:2}&:after,&:before{aspect-ratio:1/1;border-radius:50px;content:"";height:100%;left:0;position:absolute;top:0;transition:width .25s ease,background-color .25s ease}&:before{background:linear-gradient(136deg,var(--orange-gradient));width:46px;z-index:1}&:active,&:focus,&:hover{background:#fcfdfe;&>*{color:#fff}}&:active:before,&:focus:before,&:hover:before{aspect-ratio:unset;width:100%}&:after{background-color:#fff;left:0;mask-image:var(--icon-arrow);-webkit-mask-image:var(--icon-arrow);mask-position:center;mask-repeat:no-repeat;mask-size:22px auto;-webkit-mask-size:22px auto;transition:left .2s ease;z-index:2}&:active:after,&:focus:after{left:calc(100% - 46px);transition:left .25s ease-in}&:active>*,&:focus>*{left:-40px}&.button--white{background-color:#424a54;color:#fff;&:before{background:linear-gradient(136deg,#fff)}&:active,&:focus,&:hover{&>*{color:var(--dark)}}&:after{background-color:var(--dark)}}&.button--black{color:var(--dark);&>*{color:var(--dark)}&:before{background:linear-gradient(136deg,var(--dark))}&:active,&:focus,&:hover{&>*{color:#fff}}&:after{background-color:#fff}}&.button--grey-bg{background:var(--darker-grey)}}&.button--arrow{color:var(--orange);font-size:16px;font-weight:500;line-height:1.375;padding:12px 20px 12px 60px;position:relative;text-align:center;&>*{left:0;position:relative;transition:left .25s ease-in,color .25s ease}&:after,&:before{aspect-ratio:1/1;border-radius:50px;content:"";height:100%;left:0;position:absolute;top:0;transition:left .25s ease-in}&:before{background:transparent;border:2px solid var(--orange);width:46px;z-index:1}&:hover:not(:focus):before{background:linear-gradient(136deg,var(--orange-gradient));border:0}&:after{background-color:var(--orange);mask-image:var(--icon-arrow);-webkit-mask-image:var(--icon-arrow);mask-position:center;mask-repeat:no-repeat;mask-size:22px auto;-webkit-mask-size:22px auto;z-index:2}&:hover:not(:focus):after{background-color:#fff}&:active:after,&:active:before,&:focus:after,&:focus:before{left:calc(100% - 46px)}&:active>*,&:focus>*{left:-40px}&.button--white{color:#fff;&:before{border-color:#fff}&:after,&:hover:not(:focus):before{background:#fff}&:hover:not(:focus):after{background:var(--dark)}}&.button--black{color:var(--dark);&:before{border-color:var(--dark)}&:after,&:hover:not(:focus):before{background:var(--dark)}&:hover:not(:focus):after{background:#fff}}}&.button--chevron{color:var(--orange);display:block;font-weight:500;padding-left:16px;position:relative;&:after,&:before{background-color:currentColor;content:"";height:2px;left:0;position:absolute;top:50%;transform-origin:calc(100% - 1px) center;transition:transform .2s ease;width:8px}&:before{transform:translateY(-50%) rotate(45deg)}&:after{transform:translateY(-50%) rotate(-45deg)}&:hover{&:before{transform:translateY(-50%) translateX(4px) rotate(45deg)}&:after{transform:translateY(-50%) translateX(4px) rotate(-45deg)}}&:active{&:before{transform:translateY(-50%) translateX(6px) rotate(45deg)}&:after{transform:translateY(-50%) translateX(6px) rotate(-45deg)}}&.button--white{color:#fff}}}