:root { --t:500ms ease all; --d:250ms; } a { transition:var(--t); &:hover { transition-duration:var(--d); } } .bricks-button { font-weight:400; letter-spacing:-0.01em; line-height:1.2; transition:var(--t); &:hover { --bshadow:rgba(0,0,0,0.15); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0px 1px 1px 0px inset rgba(255, 255, 255, 0.1), 0px 25px 50px -10px rgba(50, 50, 93, 0.25), 0px 15px 30px -15px rgba(0, 0, 0, 0.3); transition-duration:var(--d); } &.bricks-background-dark { border-width:1px solid var(--dark); &:hover { border-width:1px solid var(--secondary-l-3); } } }