/*
 * PureCSS.com
 * https://purecss.com/examples/ghost-button/
 * An outlined button that fills with color from left to right on hover using a pseudo-element.
 */

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

.demo-ghost-button .ghost-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: .7rem 1.75rem;
		border-radius: var(--radius);
		font-family: var(--font-sans);
		font-size: .95rem;
		font-weight: 600;
		cursor: pointer;
		border: 2px solid;
		overflow: hidden;
		transition: color .3s;
		background: transparent;
	}

:is(.demo-ghost-button .ghost-btn) span {
			position: relative;
			z-index: 1;
		}

:is(.demo-ghost-button .ghost-btn)::before {
			content: '';
			position: absolute;
			inset: 0;
			transform: translateX(-101%);
			transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
		}

:is(.demo-ghost-button .ghost-btn):hover::before {
			transform: translateX(0);
		}

/* Green variant */

.demo-ghost-button .ghost-btn-green {
		border-color: var(--accent);
		color: var(--accent);
	}

:is(.demo-ghost-button .ghost-btn-green)::before {
			background: var(--accent);
		}

:is(.demo-ghost-button .ghost-btn-green):hover {
			color: var(--bg);
		}

/* Blue variant */

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

:is(.demo-ghost-button .ghost-btn-blue)::before {
			background: var(--sky);
		}

:is(.demo-ghost-button .ghost-btn-blue):hover {
			color: var(--bg);
		}

/* Pink variant — sweep from right */

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

:is(.demo-ghost-button .ghost-btn-pink)::before {
			background: var(--rose);
			transform: translateX(101%);
		}

:is(.demo-ghost-button .ghost-btn-pink):hover::before {
			transform: translateX(0);
		}

:is(.demo-ghost-button .ghost-btn-pink):hover {
			color: #fff;
		}