.btn{text-wrap:none;width:fit-content;border-radius:0;border:none;display:inline-flex;justify-content:center;justify-self:start;align-items:center;gap:var(--spacing-100,8px);font-family:var(--font-matter);font-style:normal;font-weight:400;line-height:var(--font-size-8,32px);text-overflow:ellipsis;text-wrap:nowrap;position:relative;transition:--gradient-2 var(--transition-duration-smooth),--gradient-3 var(--transition-duration-smooth),--gradient-1 var(--transition-duration-smooth),color var(--transition-duration-smooth);transition-timing-function:var(--ease-smooth);&.btn-lg{height:var(--size-11,64px);padding:var(--spacing-lg,24px);font-size:var(--text-body-lg-size,20px);&.with-arrow{padding-right:60px}.arrow-icon{font-size:24px;font-weight:600;right:18px}&:hover{.arrow-icon{animation:arrow-lg-out .2s ease-in-out forwards,arrow-lg-in .2s ease-in-out .2s forwards}}}&.btn-md{height:var(--size-10,40px);padding:10px var(--spacing-md,16px);font-size:var(--text-body-md-size,18px);&.with-arrow{padding-right:40px}.arrow-icon{font-size:20px;right:12px}&:hover{.arrow-icon{animation:arrow-md-out .2s ease-in-out forwards,arrow-md-in .2s ease-in-out .2s forwards}}}&.btn-sm{height:var(--size-9,32px);padding:10px var(--spacing-sm,8px);font-size:var(--text-body-sm-size,16px);&.with-arrow{padding-right:30px}.arrow-icon{font-size:16px;right:10px}&:hover{.arrow-icon{animation:arrow-sm-out .2s ease-in-out forwards,arrow-sm-in .2s ease-in-out .2s forwards}}}.arrow-icon{position:absolute}&:hover{--gradient-1:-300%;--gradient-2:20%;--gradient-3:200%}&.style-emphasis{background:var(--background-color-emphasis);background-image:linear-gradient(90deg,var(--background-color-accent) var(--gradient-1),var(--background-color-brand) 0%var(--gradient-2),var(--background-color-emphasis) var(--gradient-3));color:var(--text-color-onemphasis);&:hover{color:var(--text-color-onbrand)}}&.style-brand{background:var(--background-color-brand);color:var(--text-color-onbrand)}&.style-accent{background:var(--background-color-accent);color:var(--text-color-onaccent)}&.style-neutral{background:var(--background-color-neutral);background-image:linear-gradient(90deg,var(--background-color-accent) var(--gradient-1),var(--background-color-neutral) var(--gradient-3));color:var(--text-color-primary)}}@keyframes arrow-lg-out{0%{right:18px}to{right:-10px;opacity:0}}@keyframes arrow-lg-in{0%{right:36px;opacity:0}to{right:18px;opacity:1}}@keyframes arrow-md-out{0%{right:12px}to{right:-10px;opacity:0}}@keyframes arrow-md-in{0%{right:24px;opacity:0}to{right:12px;opacity:1}}@keyframes arrow-sm-out{0%{right:10px}to{right:-10px;opacity:0}}@keyframes arrow-sm-in{0%{right:20px;opacity:0}to{right:10px;opacity:1}}@keyframes arrow-sm-out-reverse{0%{right:0;opacity:1}to{right:20px;opacity:0}}@keyframes arrow-sm-in-reverse{0%{left:20px;opacity:1}to{left:40px;opacity:0}}