/*
 * PureCSS.com
 * https://purecss.com/examples/border-draw-button/
 * A button whose border traces itself on hover using SVG stroke-dashoffset animation.
 */

.demo-border-draw-button .draw-btns {
		display: flex;
		gap: 1.5rem;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: .5rem;
	}

.demo-border-draw-button .draw-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: .75rem 2rem;
		background: transparent;
		border: none;
		color: var(--text);
		font-family: var(--font-sans);
		font-size: .95rem;
		font-weight: 600;
		cursor: pointer;
		letter-spacing: .02em;
	}

:is(.demo-border-draw-button .draw-btn) svg {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			overflow: visible;
		}

:is(.demo-border-draw-button .draw-btn) rect {
			fill: none;
			stroke: var(--accent);
			stroke-width: 2;
			rx: 8;
		}

:is(.demo-border-draw-button .draw-btn) .border-rect {
			stroke-dasharray: 328;
			stroke-dashoffset: 328;
			transition: stroke-dashoffset .6s cubic-bezier(0.4, 0, 0.2, 1);
		}

:is(.demo-border-draw-button .draw-btn):hover .border-rect {
			stroke-dashoffset: 0;
		}

.demo-border-draw-button .draw-btn-blue {
		color: var(--sky);
	}

:is(.demo-border-draw-button .draw-btn-blue) .border-rect {
			stroke: var(--sky);
		}

.demo-border-draw-button .draw-btn-pink {
		color: var(--rose);
	}

:is(.demo-border-draw-button .draw-btn-pink) .border-rect {
			stroke: var(--rose);
		}