.ui-button{border:1px solid transparent;border-radius:15px;padding:.95rem 1.4rem;cursor:pointer;transition:transform .12s ease;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-item-spacing);background:var(--ds-button-primary-background);color:var(--ds-button-primary-color);font-weight:var(--ds-fontWeight-normal);line-height:1;position:relative;isolation:isolate;overflow:hidden;--ui-button-wavy-color:var(--ds-color-brand-emphasis);&.default,&.primary{background:var(--ds-button-primary-background);color:var(--ds-button-primary-color);border-color:var(--ds-button-primary-background);--ui-button-wavy-color:var(--ds-color-brand-emphasis)}&.secondary{background:var(--ds-button-secondary-background);color:var(--ds-button-secondary-color);border-color:var(--ds-button-secondary-background)}&.negative,&.secondary{--ui-button-wavy-color:var(--ds-color-brand-primary)}&.negative{background:var(--ds-button-negative-background);color:var(--ds-button-negative-color);border:1px solid var(--ds-button-negative-border)}&.muted{background:var(--ds-button-muted-background);color:var(--ds-button-muted-color);border:1px solid color-mix(in srgb,var(--ds-color-brand-primary) 16%,#fff);--ui-button-wavy-color:var(--ds-color-brand-secondary)}&.ghost{color:var(--ds-button-ghost-color);border:1px solid var(--ds-button-ghost-color);box-shadow:none;text-decoration:none;text-underline-offset:.2em;--ui-button-wavy-color:var(--ds-button-ghost-color)}&.ghost,&.transparent{background:transparent}&.transparent{color:var(--ds-button-primary-background);border-color:transparent;--ui-button-wavy-color:var(--ds-button-primary-background)}&.danger{background:var(--ds-button-danger-background);color:var(--ds-button-danger-color);border:1px solid var(--ds-button-danger-border);--ui-button-wavy-color:var(--ds-button-danger-color)}&.warning{background:var(--ds-button-warning-background);color:var(--ds-button-warning-color);border:1px solid var(--ds-button-warning-border);--ui-button-wavy-color:var(--ds-button-warning-color)}&.info{background:var(--ds-button-info-background);color:var(--ds-button-info-color);border:1px solid var(--ds-button-info-border);--ui-button-wavy-color:var(--ds-button-info-color)}&.success{background:var(--ds-button-success-background);color:var(--ds-button-success-color);border:1px solid var(--ds-button-success-border);--ui-button-wavy-color:var(--ds-button-success-color)}&.glassy{background:var(--ds-button-glassy-background);color:var(--ds-content-fontColor-neutral);border:1px solid var(--ds-button-glassy-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);--ui-button-wavy-color:var(--ds-color-neutral-0)}&.btn-instagram{background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4);color:#fff;border-color:#dd2a7b;--ui-button-wavy-color:#ffffff}&.sm{font-size:.8rem;padding:.5rem 1rem}&.md{font-size:1rem}&.lg{font-size:1.2rem}&.full-width,&.width-full{width:var(--ds-size-full)}&.width-auto{width:auto}&.align-auto{align-self:auto}&.align-left{align-self:flex-start;margin-right:auto}&.align-center{align-self:center;margin-left:auto;margin-right:auto}&.align-right{align-self:flex-end;margin-left:auto}&.float-bottom,&.float-middle,&.float-top{position:fixed;z-index:20}&.float-top{top:4rem}&.float-middle{top:50%;transform:translateY(-50%)}&.float-bottom{bottom:4rem}&.float-bottom.align-left,&.float-middle.align-left,&.float-top.align-left{left:1rem;right:auto;margin:0}&.float-bottom.align-center,&.float-middle.align-center,&.float-top.align-center{left:50%;right:auto;margin:0;transform:translateX(-50%)}&.float-middle.align-center{transform:translate(-50%,-50%)}&.float-bottom.align-right,&.float-middle.align-right,&.float-top.align-right{left:auto;right:1rem;margin:0}&.corner-square{border-radius:6px}&.corner-round{border-radius:var(--ds-pill-radius)}&.text-left{justify-content:flex-start;text-align:left}&.text-center{justify-content:center;text-align:center}&.text-right{justify-content:flex-end;text-align:right}&.text-transform-normal{text-transform:none}&.text-transform-uppercase{text-transform:uppercase}&.text-transform-lowercase{text-transform:lowercase}&.text-size-sm{font-size:.8rem}&.text-size-md{font-size:1rem}&.text-size-lg{font-size:1.2rem}&.text-weight-normal{font-weight:var(--ds-fontWeight-normal)}&.text-weight-bold{font-weight:var(--ds-fontWeight-bold)}&.is-underlined-text .ui-button__label{text-decoration:underline;text-underline-offset:.18em}&.no-border{border-color:transparent}&:active{transform:translateY(1px)}&.disabled,&:disabled{background:#d6d8db;color:#8b9198;cursor:not-allowed;transform:none}&.disabled:after,&.disabled:before,&:disabled:after,&:disabled:before{content:none}.ui-button__label{display:inline-block}.ui-button__label,>:where(i,ion-icon){position:relative;z-index:1}>:where(i,ion-icon){color:currentColor}&.is-wavy:before{top:0;bottom:0;left:-170%;width:140%;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--ui-button-wavy-color) 6%,transparent) 14%,color-mix(in srgb,var(--ui-button-wavy-color) 28%,transparent) 32%,color-mix(in srgb,var(--ui-button-wavy-color) 46%,transparent) 50%,color-mix(in srgb,var(--ui-button-wavy-color) 28%,transparent) 68%,color-mix(in srgb,var(--ui-button-wavy-color) 6%,transparent) 86%,transparent 100%);transform:translateX(0) skewX(-14deg);transform-origin:center;animation:ui-button-wavy-train 5.6s cubic-bezier(.36,0,.2,1) infinite}&.is-glossy:after,&.is-wavy:before{content:"";position:absolute;z-index:0;pointer-events:none}&.is-glossy:after{inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 39%),linear-gradient(115deg,rgba(255,255,255,0) 24%,rgba(255,255,255,.28) 48%,rgba(255,255,255,0) 72%)}&.icon-left-edge{position:relative;padding-left:2.65rem;padding-right:2.65rem;>:where(i,ion-icon){position:absolute;left:1rem}.ui-button__label{width:100%;text-align:inherit}}}@keyframes ui-button-wavy-train{0%{transform:translateX(0) skewX(-14deg)}8%{transform:translateX(0) skewX(-14deg)}82%{transform:translateX(260%) skewX(-14deg)}to{transform:translateX(260%) skewX(-14deg)}}@media (prefers-reduced-motion:reduce){.ui-button.is-wavy:before{animation:none;left:8%;transform:skewX(-14deg)}}