:root{--btn-width:unset;--btn-height:var(--el-height-md);--btn-margin:var(--el-margin-md);--btn-padding:0 var(--el-margin-md);--btn-active-color:var(--brand-color);--btn-background:var(--brand-gradient);--btn-background-hover:var(--brand-gradient-hover);--btn-color:var(--page-background);--btn-color-hover:var(--page-background);--btn-radius:calc(var(--btn-height)/2);--btn-text-transform:uppercase}.btn{align-items:center;background:var(--btn-background);border:0;border-radius:var(--btn-radius);color:transparent;cursor:pointer;display:flex;flex-shrink:0;font-weight:700;height:var(--btn-height);justify-content:center;line-height:1;margin:0 auto var(--btn-margin);padding:var(--btn-padding);position:relative;text-transform:var(--btn-text-transform);transition-duration:.25s;transition-property:width,color,background-color,border;transition-timing-function:ease;width:var(--btn-width)}.btn:before{border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition:opacity .5s}.btn:before,.btn:focus{background:var(--btn-background-hover)}.btn:focus{outline:1px solid transparent;text-decoration:none}.btn:focus:not(.btn--loading) .btn__content{color:var(--btn-color-hover)}.btn:focus:not(.btn--loading):before{opacity:1}@media(hover:hover){.btn:hover{text-decoration:none}.btn:hover:not(.btn--loading) .btn__content{color:var(--btn-color-hover)}.btn:hover:not(.btn--loading):before{opacity:1}}.btn.btn--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.btn.btn--loading{animation:rotate 1.4s ease .25s infinite;background:transparent;border-color:var(--btn-active-color);border-left-color:transparent;border-style:solid;border-width:2px;color:transparent;cursor:default;font-size:0;height:var(--btn-height);pointer-events:none;width:var(--btn-height)}.btn.btn--loading .btn__content{opacity:0}.btn .btn__content{align-items:center;color:var(--btn-color);display:flex;flex-wrap:nowrap;font-size:14px;transition:opacity .2s;z-index:1}.btn .btn__content .btn__icon{color:currentColor;flex-shrink:0;font-size:26px;margin-right:8px;transition:color .3s}.btn--fluid{--btn-width:100%}.btn--outline{--btn-background:none;--btn-background-hover:var(--accent-color);--btn-color:var(--accent-color);border:1px solid var(--btn-background-hover)}@keyframes rotate{0%{transform:rotate(1turn)}}