/**
 * Reusable Components
 * Buttons, badges, notices, and other UI elements
 */

.ta-button {
	background: var(--ta-primary) !important;
	border: none !important;
	border-radius: var(--ta-radius-md) !important;
	padding: 10px 20px !important;
	font-weight: var(--ta-font-weight-medium) !important;
	font-size: var(--ta-font-size-md) !important;
	color: white !important;
	transition: background var(--ta-transition-base) !important;
	width: 100%;
	height: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ta-space-sm);
	cursor: pointer;
}

.ta-button:hover:not(:disabled) {
	background: var(--ta-primary-hover) !important;
}

.ta-button:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

.expand-button {
	background: transparent;
	border: none;
	padding: var(--ta-space-xs);
	cursor: pointer;
	color: var(--ta-gray-500);
	transition: all var(--ta-transition-base);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ta-radius-sm);
	flex-shrink: 0;
}

.expand-button:hover {
	color: var(--ta-primary);
	background: var(--ta-gray-50);
}

.pillar-badge {
	display: inline-block;
	padding: 2px var(--ta-space-md);
	background: var(--ta-primary);
	color: white;
	border-radius: var(--ta-radius-sm);
	font-size: var(--ta-font-size-xs);
	font-weight: var(--ta-font-weight-semibold);
	text-transform: uppercase;
	margin-right: var(--ta-space-sm);
}

.count-badge {
	display: inline-block;
	background: var(--ta-primary);
	color: white;
	padding: 2px var(--ta-space-sm);
	border-radius: var(--ta-radius-sm);
	font-size: var(--ta-font-size-sm);
	font-weight: var(--ta-font-weight-semibold);
	margin-left: var(--ta-space-xs);
}

.priority-badge {
	display: inline-block;
	padding: 2px var(--ta-space-md);
	border-radius: var(--ta-radius-sm);
	font-size: var(--ta-font-size-xs);
	font-weight: var(--ta-font-weight-medium);
	text-transform: uppercase;
	margin-top: var(--ta-space-sm);
}

.priority-high {
	background: var(--ta-priority-high);
	color: white;
}

.priority-medium {
	background: var(--ta-priority-medium);
	color: var(--ta-gray-800);
}

.priority-low {
	background: var(--ta-priority-low);
	color: white;
}

.ta-notice {
	border-radius: var(--ta-radius-md);
	padding: 10px var(--ta-space-lg);
	margin-bottom: var(--ta-space-lg);
	font-size: var(--ta-font-size-base);
	display: flex;
	align-items: center;
}

.ta-notice.is-error {
	background: var(--ta-error-bg);
	color: var(--ta-error-text);
	border: 1px solid var(--ta-error-border);
}

.ta-notice.is-info {
	background: var(--ta-info-bg);
	color: var(--ta-info-text);
	border: 1px solid var(--ta-info-border);
}

.ta-notice.is-success {
	background: var(--ta-success-bg);
	color: var(--ta-success-text);
	border: 1px solid var(--ta-success-border);
}

.ta-notice.is-warning {
	background: var(--ta-warning-bg);
	color: var(--ta-warning-text);
	border: 1px solid var(--ta-warning-border);
}