/**
 * Button Component
 * 
 * Provides button styles for various contexts:
 * - Team assignment buttons (move-team-btn)
 * - Toggle buttons (toggle-spymaster-btn)
 * - Icon buttons (icon-btn)
 * 
 * Dependencies: variables.css
 * Used by: team-assignment.css, player-card.css
 */

/* ========================================
   Icon Buttons (Edit/Confirm/Cancel)
   ======================================== */

/* Icon buttons for edit/confirm/cancel actions */
.icon-btn {
	padding: clamp(3px, 0.6vh, 4px);
	background: transparent;
	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	font-size: clamp(14px, 2vh, 16px);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--duration-normal) var(--easing-standard);
	min-width: clamp(20px, 3vh, 24px);
	min-height: clamp(20px, 3vh, 24px);
}

.icon-btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* Edit button - grey outline icon style, flipped vertically */
.icon-btn.edit-btn {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-normal);
	font-style: normal;
	transform: scaleY(-1);
}

.icon-btn.edit-btn:hover {
	color: var(--color-text-primary);
	background: var(--color-border-light);
}

.icon-btn.confirm-btn {
	color: var(--color-success);
	border-color: var(--color-success);
	display: none; /* Hidden by default */
}

.icon-btn.confirm-btn:hover {
	background: var(--color-success);
	color: var(--color-text-inverse);
}

.icon-btn.cancel-btn {
	color: var(--color-error);
	border-color: var(--color-error);
	display: none; /* Hidden by default */
}

.icon-btn.cancel-btn:hover {
	background: var(--color-error);
	color: var(--color-text-inverse);
}

/* ========================================
   Team Assignment Buttons
   ======================================== */

/* Base button styling for team assignment */
.move-team-btn {
	flex: 0 1 auto; /* Don't grow, can shrink, start from content size */
	min-width: 0; /* Allow buttons to shrink below default size */
	padding: clamp(5px, 1vh, 8px) clamp(8px, 1.2vh, 12px);
	font-size: clamp(0.75rem, 1.4vh, 0.9rem);
	border: none;
	border-radius: var(--border-radius-base);
	cursor: pointer;
	transition: all var(--duration-normal) var(--easing-standard);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Red team button */
.move-team-btn.team-red {
	background: var(--color-team-red-dark);
}

.move-team-btn.team-red:hover {
	background: var(--color-team-red-darker);
	transform: scale(1.05);
	box-shadow: var(--shadow-team-red);
}

/* Both/Purple team button */
.move-team-btn.team-both {
	background: var(--color-team-both);
}

.move-team-btn.team-both:hover {
	background: var(--color-team-both-dark);
	transform: scale(1.05);
	box-shadow: var(--shadow-team-both);
}

/* Blue team button */
.move-team-btn.team-blue {
	background: var(--color-team-blue-dark);
}

.move-team-btn.team-blue:hover {
	background: var(--color-team-blue-darker);
	transform: scale(1.05);
	box-shadow: var(--shadow-team-blue);
}

/* Board team button */
.move-team-btn.team-board {
	background: var(--color-team-board);
}

.move-team-btn.team-board:hover {
	background: var(--color-team-board-dark);
	transform: scale(1.05);
	box-shadow: var(--shadow-team-board);
}

.move-team-btn:active {
	transform: scale(0.95);
}

/* Ensure team buttons maintain white text color regardless of other CSS rules */
.move-team-btn.team-red,
.move-team-btn.team-blue,
.move-team-btn.team-both {
	color: var(--color-text-inverse) !important;
}

/* ========================================
   Toggle Spymaster Button
   ======================================== */

/* Toggle spymaster button - with two visual states */
.toggle-spymaster-btn {
	padding: clamp(5px, 1vh, 8px) clamp(8px, 1.2vh, 12px);
	font-size: clamp(0.75rem, 1.4vh, 0.9rem);
	border: var(--border-width-thick) solid transparent;
	border-radius: var(--border-radius-base);
	cursor: pointer;
	transition: all var(--duration-normal) var(--easing-standard);
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
}

/* Default state (not a spy) - full orange background with white text */
.toggle-spymaster-btn.not-spy {
	background: var(--color-warning);
	color: var(--color-text-inverse);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	border-color: transparent;
}

.toggle-spymaster-btn.not-spy:hover {
	background: var(--color-warning-dark);
	transform: scale(1.05);
	box-shadow: var(--shadow-warning);
}

/* Active state (is a spy) - white background with orange text and border */
.toggle-spymaster-btn.is-spy {
	background: var(--color-bg-primary);
	color: var(--color-warning);
	text-shadow: none;
	border-color: var(--color-warning);
}

.toggle-spymaster-btn.is-spy:hover {
	background: var(--color-warning-bg);
	transform: scale(1.05);
	box-shadow: var(--shadow-warning);
}

.toggle-spymaster-btn:active {
	transform: scale(0.95);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 600px) {
	.move-team-btn,
	.toggle-spymaster-btn {
		font-size: clamp(0.7rem, 1.3vh, 0.8rem);
		padding: clamp(4px, 0.8vh, 6px) clamp(6px, 1vh, 10px);
	}
}