@import url('variables.css');

:root {
	/* Button-specific variables */
	--color-button-background: #2c7e9e; /* Solid fallback color */
	--color-button-gradient-start: #2c7e9e;
	--color-button-gradient-mid: #3dadd9;
	--color-button-gradient-mid2: #38a0ca;
	--color-button-gradient-end: #41b9e8;
	--color-button-hover: #41B6E6;
}

.button_container {
	overflow: hidden;
	margin-bottom: var(--spacing-medium, 12px);
	padding: var(--spacing-large, 16px) 4px;
}

div.button {
	clear: both;
}

span.button {
	display: block;
	float: left;
	width: auto;
	margin-right: 2px;
	padding: 0.5em;
}

img.button {
	display: none;
}

a.button:link, a.button:visited {
	font-weight: bold;
	color: var(--color-light, #ffffff);
	text-decoration: none;
	border-top: 2px solid var(--color-light, #ffffff);
	border-right: 2px solid var(--color-secondary, #00488C);
	border-bottom: 2px solid var(--color-secondary, #00488C);
	border-left: 2px solid var(--color-light, #ffffff);
	border-radius: var(--radius-small, 6px);
	padding: 12px;
	background-color: var(--color-button-background, #2c7e9e);
	/* Modern Gradient */
	background: linear-gradient(
			to bottom,
			var(--color-button-gradient-start, #2c7e9e) 0%,
			var(--color-button-gradient-mid, #3dadd9) 50%,
			var(--color-button-gradient-mid2, #38a0ca) 51%,
			var(--color-button-gradient-end, #41b9e8) 100%
	);

	/* Safari Compatibility */
	background: -webkit-linear-gradient(
			to bottom,
			#2c7e9e 0%,
			#3dadd9 50%,
			#38a0ca 51%,
			#41b9e8 100%
	);
}

a.button:hover {
	font-weight: bold;
	color: var(--color-light, #ffffff);
	background-color: var(--color-light, white);
	text-decoration: none;
	position: relative;
	top: 1px;
	left: 1px;
	background-color: var(--color-button-hover, #41B6E6);
}

/* Action Buttons (Edit & Remove) */
div.button_action {
	background-color: #D9E8FF;
	text-align: center;
	float: right;
	border-left: 1px solid var(--color-secondary, #00488C);
	border-top: 1px solid var(--color-secondary, #00488C);
	margin-left: 2px; /* Keeping original value */
}