/*
  Button Styles
  
  Global button styles that can be applied to any element with .is-style-limson-btn-* classes
*/

/* Base styles for all custom button styles */
/* .is-style-limson-btn-pill a,
.is-style-limson-btn-pill-outline a,
.is-style-limson-btn-text a,
.is-style-limson-btn-text-arrow a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1rem;
	transition: all 0.2s ease-in-out;
} */

.is-style-limson-btn-pill > *,
.is-style-limson-btn-pill-outline > *,
.is-style-limson-btn-text > *,
.is-style-limson-btn-text-arrow > * {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1rem;
	transition: all 0.2s ease-in-out;
}

/* Pill Button Style */
.is-style-limson-btn-pill a {
	padding: 5px 1rem;
	background: var(--color-primary);
	color: var(--color-dark-green);
	border-color: var(--color-dark-green);
	border-radius: 100vmax;
	font-weight: 400;
	border: 1px solid var(--color-dark-green);
	transition: color 0.2s ease-in-out;
	& * {
		color: var(--color-dark-green);
		transition: color 0.2s ease-in-out;
	}
}

.is-style-limson-btn-pill a:hover {
	background: var(--color-dark-green);
	color: var(--color-primary);
	text-decoration: none;
	color: var(--color-dark-green);
	border-color: var(--color-lime-green);
	color: var(--color-primary);
	& * {
		color: var(--color-primary);
	}
}

/* Pill Outline Button Style */
.is-style-limson-btn-pill-outline a {
	padding: var(--space-xs) var(--space-m);
	background: transparent;
	color: var(--color-dark-green);
	border: 2px solid var(--color-dark-green);
	border-radius: 100vmax;
	font-weight: 400;
}

.is-style-limson-btn-pill-outline a:hover {
	background: var(--color-dark-green);
	color: var(--color-light);
	border-color: var(--color-dark-green);
	transform: translateY(-2px);
}

/* Text Button Style */
.is-style-limson-btn-text a {
	padding: var(--space-xs) 0;
	background: transparent;
	color: currentColor;
	font-weight: 400;
	border: none;
	text-decoration: underline;
	text-underline-offset: 0.5ex;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.3s ease-in-out;
}

.is-style-limson-btn-text a:hover {
	text-decoration-color: currentColor;
}

/* Text with Arrow Button Style */
.is-style-limson-btn-text-arrow {
	padding: var(--space-xs) 0;
	background: transparent;
	color: currentColor;
	font-weight: 400;
	position: relative;
	border: none;
}

.is-style-limson-btn-text-arrow::after {
	content: "→";
	margin-left: var(--space-2xs);
	transition: transform 0.2s ease-in-out;
	display: inline-block;
}

.is-style-limson-btn-text-arrow:hover::after {
	transform: translateX(4px);
}