.knob{background:transparent;border:none;padding:0.759rem 1rem;text-decoration:none;display:inline-block;line-height:1.1;font-weight:normal;position:relative;border-radius:var(--button-radius);color:currentColor;--link-hover-color:currentColor;overflow:hidden;&:not(.knob--primary,.knob--secondary)::after{filter:invert(100%) contrast(5) grayscale(100%);}&:not(.knob--secondary)::before{background:currentColor;}&::after{content:attr(data-text);position:absolute;inset:0.759rem 1rem;}&:hover::after{animation-name:knob__rotate-out,knob__rotate-in;animation-timing-function:cubic-bezier(0.5,-1,0.5,2),cubic-bezier(0.5,-1,0.5,2);animation-duration:0.3s,0.3s;animation-delay:0s,0.3s;animation-iteration-count:1,1;}}@keyframes knob__rotate-out{from{transform:none;opacity:1;}to{transform:translateY(0.75rem);opacity:0;}}@keyframes knob__rotate-in{from{transform:translateY(-0.75rem);opacity:0;}to{transform:0;opacity:1;}}.knob--secondary{color:var(--color-base-fg);background-color:var(--color-base-bg);}.knob--secondary::before{border:1px solid;}.knob::before{content:'';transition:border-radius 0.25s;position:absolute;inset:0;border-radius:var(--button-radius);}.knob__text{opacity:0;}.knob:focus{outline:3px solid var(--color-accent-bg);}.knob--primary{color:var(--color-accent-bg);&::after{color:var(--color-accent-fg);}}