button,div.button{text-transform:capitalize}button.primary,div.button.primary{color:#fff;background:radial-gradient(at bottom,#c7c1fb,#7161f5);border:1px solid #7161f51a;position:relative;overflow:hidden;box-shadow:0 6px 16px #7161f54d}button.primary:after,div.button.primary:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#c7c1fb,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}button.primary:hover:after,div.button.primary:hover:after{left:100%}button.secondary,button.transparent:hover,div.button.secondary,div.button.transparent:hover{color:#fff;background:radial-gradient(at bottom,#7d7dd1,#3d3dab);border:1px solid #3d3dab1a;position:relative;overflow:hidden;box-shadow:0 6px 16px #3d3dab4d}button.secondary:after,button.transparent:hover:after,div.button.secondary:after,div.button.transparent:hover:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#7d7dd1,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}button.secondary:hover:after,button.transparent:hover:after,div.button.secondary:hover:after,div.button.transparent:hover:after{left:100%}button.success,div.button.success{color:#fff;background:radial-gradient(at bottom,#2ed889,#198754);border:1px solid #1987541a;position:relative;overflow:hidden;box-shadow:0 6px 16px #1987544d}button.success:after,div.button.success:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#2ed889,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}button.success:hover:after,div.button.success:hover:after{left:100%}button.warning,div.button.warning{color:#1d1d1d;background:radial-gradient(at bottom,#ffd45e,#f7b500);border:1px solid #f7b5001a;position:relative;overflow:hidden;box-shadow:0 6px 16px #f7b5004d}button.warning:after,div.button.warning:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#ffd45e,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}button.warning:hover:after,div.button.warning:hover:after{left:100%}button.danger,div.button.danger{color:#fff;background:radial-gradient(at bottom,#e58383,#d32f2f);border:1px solid #d32f2f1a;position:relative;overflow:hidden;box-shadow:0 6px 16px #d32f2f4d}button.danger:after,div.button.danger:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#e58383,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}button.danger:hover:after,div.button.danger:hover:after{left:100%}.dark button.default,.dark div.button.default{color:#fff;background:radial-gradient(at bottom,#585858,#252525);border:1px solid #aeaeae1a;position:relative;overflow:hidden;box-shadow:0 6px 16px #4747474d}.dark button.default:after,.dark div.button.default:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#7a7a7a,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}.dark button.default:hover:after,.dark div.button.default:hover:after{left:100%}.light button.default,.light div.button.default{color:#1d1d1d;background:radial-gradient(at bottom,#fff,#efefef);border:1px solid #3c3c3c1a;position:relative;overflow:hidden;box-shadow:0 6px 16px #aeaeae4d}.light button.default:after,.light div.button.default:after{content:"";opacity:.5;z-index:0;background:linear-gradient(90deg,#0000,#e1e1e1,#0000);width:100%;height:100%;transition:left .3s ease-out;position:absolute;top:0;left:-100%;transform:skew(-15deg)}.light button.default:hover:after,.light div.button.default:hover:after{left:100%}button.transparent,div.button.transparent{background:0 0;border:1px solid #0000;transition:background 1s ease-in-out,color .3s}button.disabled,div.button.disabled{color:#1d1d1d;pointer-events:none;background:radial-gradient(at bottom,#e1e1e1,#aeaeae);border:1px solid #aeaeae1a;box-shadow:0 6px 16px #aeaeae4d}