/**
 * Rajgir Parent Theme
 *
 * Component CSS — Buttons
 *
 * Canonical path:
 * assets/css/components/buttons.css
 *
 * Component:
 * Rajgir Button System
 *
 * Conceptual variants:
 * - Primary
 * - Secondary
 * - Danger
 * - Ghost
 *
 * Applicable states:
 * - Default
 * - Hover
 * - Focus
 * - Active
 * - Disabled
 * - Loading
 *
 * Responsibilities:
 * - Button visual presentation.
 * - Button variants.
 * - Button interaction states.
 * - Accessible focus presentation.
 * - Loading presentation.
 * - Reusable action-button presentation.
 *
 * This file does NOT:
 * - execute business logic;
 * - perform authorization;
 * - perform API requests;
 * - mutate application data;
 * - determine payment/booking/complaint success;
 * - own application state;
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. RAJGIR BUTTON SYSTEM
   ========================================================================== */

.rg-button,
button.rg-action-btn,
a.rg-action-btn,
input.rg-action-btn,
.rg-search-form__submit {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap:
		var(--rajgir-space-icon-gap);

	min-height:
		var(--rajgir-button-min-height);

	padding:
		var(--rajgir-space-button-block)
		var(--rajgir-space-button-inline);

	border:
		1px solid transparent;

	border-radius:
		var(--rajgir-radius-control);

	font-family:
		var(--rajgir-type-button-font-family);

	font-size:
		var(--rajgir-type-button-font-size);

	font-weight:
		var(--rajgir-type-button-font-weight);

	line-height:
		var(--rajgir-type-button-line-height);

	text-align: center;
	text-decoration: none;

	cursor: pointer;

	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   2. BUTTON CONTENT
   ========================================================================== */

.rg-button > *,
.rg-action-btn > * {
	flex: 0 0 auto;
}


/* ==========================================================================
   3. PRIMARY
   ========================================================================== */

.rg-button--primary,
.rg-button-primary {
	background-color:
		var(--rajgir-color-primary);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   4. PRIMARY — HOVER
   ========================================================================== */

.rg-button--primary:hover,
.rg-button-primary:hover {
	background-color:
		var(--rajgir-color-primary-hover);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary-hover);
}


/* ==========================================================================
   5. SECONDARY
   ========================================================================== */

.rg-button--secondary,
.rg-button-secondary {
	background-color:
		var(--rajgir-color-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-border);
}


/* ==========================================================================
   6. SECONDARY — HOVER
   ========================================================================== */

.rg-button--secondary:hover,
.rg-button-secondary:hover {
	background-color:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   7. DANGER
   ========================================================================== */

.rg-button--danger,
.rg-button-danger {
	background-color:
		var(--rajgir-color-error);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   8. DANGER — HOVER
   ========================================================================== */

.rg-button--danger:hover,
.rg-button-danger:hover {
	background-color:
		var(--rajgir-color-error-hover);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-error-hover);
}


/* ==========================================================================
   9. GHOST
   ========================================================================== */

.rg-button--ghost,
.rg-button-ghost {
	background-color:
		transparent;

	color:
		var(--rajgir-color-primary);

	border-color:
		transparent;
}


/* ==========================================================================
   10. GHOST — HOVER
   ========================================================================== */

.rg-button--ghost:hover,
.rg-button-ghost:hover {
	background-color:
		var(--rajgir-color-surface);

	color:
		var(--rajgir-color-primary-hover);

	border-color:
		var(--rajgir-color-border);
}


/* ==========================================================================
   11. DEFAULT BUTTON
   ========================================================================== */

.rg-button:not(
	.rg-button--primary,
	.rg-button--secondary,
	.rg-button--danger,
	.rg-button--ghost,
	.rg-button-primary,
	.rg-button-secondary,
	.rg-button-danger,
	.rg-button-ghost
) {
	background-color:
		var(--rajgir-color-primary);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   12. FOCUS
   ========================================================================== */

.rg-button:focus-visible,
.rg-action-btn:focus-visible,
.rg-search-form__submit:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   13. ACTIVE
   ========================================================================== */

.rg-button:active,
.rg-action-btn:active,
.rg-search-form__submit:active {
	transform:
		translateY(1px);
}


/* ==========================================================================
   14. DISABLED
   ========================================================================== */

.rg-button:disabled,
.rg-action-btn:disabled,
.rg-search-form__submit:disabled,
.rg-button[aria-disabled="true"],
.rg-action-btn[aria-disabled="true"] {
	cursor:
		not-allowed;

	opacity:
		var(--rajgir-state-disabled-opacity);
}


/* ==========================================================================
   15. LOADING
   ========================================================================== */

.rg-button[aria-busy="true"],
.rg-action-btn[aria-busy="true"],
.rg-button.is-loading,
.rg-action-btn.is-loading {
	cursor:
		wait;
}


/* ==========================================================================
   16. LOADING — CONTENT
   ========================================================================== */

.rg-button[aria-busy="true"],
.rg-action-btn[aria-busy="true"],
.rg-button.is-loading,
.rg-action-btn.is-loading {
	position: relative;
}


/* ==========================================================================
   17. LOADING INDICATOR
   ========================================================================== */

.rg-button[aria-busy="true"]::after,
.rg-action-btn[aria-busy="true"]::after,
.rg-button.is-loading::after,
.rg-action-btn.is-loading::after {
	content: "";

	width:
		var(--rajgir-size-icon-sm);

	height:
		var(--rajgir-size-icon-sm);

	border:
		2px solid currentColor;

	border-right-color:
		transparent;

	border-radius:
		50%;

	animation:
		rajgir-button-spin
		var(--rajgir-motion-duration-fast)
		linear
		infinite;
}


/* ==========================================================================
   18. LOADING ANIMATION
   ========================================================================== */

@keyframes rajgir-button-spin {

	to {
		transform:
			rotate(360deg);
	}

}


/* ==========================================================================
   19. LINK-BASED ACTION BUTTON
   ========================================================================== */

a.rg-action-btn {
	text-decoration: none;
}


/* ==========================================================================
   20. LEGACY / EXISTING ACTION BUTTON
   ========================================================================== */

/*
 * Existing Rajgir templates already use:
 *
 * .rg-action-btn
 *
 * Therefore the common Button Component intentionally styles this
 * class instead of forcing immediate markup replacement across every
 * existing template.
 */

.rg-action-btn {
	background-color:
		var(--rajgir-color-primary);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   21. EXISTING ACTION BUTTON — HOVER
   ========================================================================== */

.rg-action-btn:hover {
	background-color:
		var(--rajgir-color-primary-hover);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary-hover);
}


/* ==========================================================================
   22. LIKE ACTION
   ========================================================================== */

.rg-like-btn {
	/*
	 * Reaction authority remains outside the Theme.
	 *
	 * This class only presents the action control.
	 */
}


/* ==========================================================================
   23. LIKED PRESENTATION
   ========================================================================== */

.rg-like-btn.liked,
.rg-like-btn[aria-pressed="true"] {
	background-color:
		var(--rajgir-color-surface);

	color:
		var(--rajgir-color-primary);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   24. SHARE ACTION
   ========================================================================== */

.rg-share-btn,
.rg-news-share-btn,
.rg-tourism-share-btn {
}


/* ==========================================================================
   25. COMMENT ACTION
   ========================================================================== */

.rg-news-comment-btn,
.rg-tourism-comment-btn {
}


/* ==========================================================================
   26. SEARCH SUBMIT
   ========================================================================== */

.rg-search-form__submit {
	background-color:
		var(--rajgir-color-primary);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   27. SEARCH SUBMIT — HOVER
   ========================================================================== */

.rg-search-form__submit:hover {
	background-color:
		var(--rajgir-color-primary-hover);

	color:
		var(--rajgir-color-text-inverse);

	border-color:
		var(--rajgir-color-primary-hover);
}


/* ==========================================================================
   28. ICON-ONLY BUTTON FOUNDATION
   ========================================================================== */

.rg-button--icon,
.rg-icon-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width:
		var(--rajgir-button-icon-size);

	min-width:
		var(--rajgir-button-icon-size);

	height:
		var(--rajgir-button-icon-size);

	padding: 0;
}


/* ==========================================================================
   29. BUTTON ICON
   ========================================================================== */

.rg-button__icon,
.rg-action-btn__icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;
}


/* ==========================================================================
   30. BUTTON LABEL
   ========================================================================== */

.rg-button__label,
.rg-action-btn__label {
	display: inline-block;
}


/* ==========================================================================
   31. FULL WIDTH
   ========================================================================== */

.rg-button--full {
	width: 100%;
}


/* ==========================================================================
   32. BUTTON GROUP
   ========================================================================== */

.rg-button-group {
	display: flex;

	align-items: center;

	gap:
		var(--rajgir-space-component-gap);

	flex-wrap: wrap;
}


/* ==========================================================================
   33. BUTTON GROUP — VERTICAL
   ========================================================================== */

.rg-button-group--vertical {
	flex-direction: column;

	align-items: stretch;
}


/* ==========================================================================
   34. BUTTON TRANSITION SAFETY
   ========================================================================== */

/*
 * Motion remains lightweight and purposeful.
 *
 * No JavaScript is required for ordinary hover/focus/active
 * presentation.
 */


/* ==========================================================================
   35. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-button,
	.rg-action-btn,
	.rg-search-form__submit {
		transition: none;
	}

	.rg-button:active,
	.rg-action-btn:active,
	.rg-search-form__submit:active {
		transform: none;
	}

	.rg-button[aria-busy="true"]::after,
	.rg-action-btn[aria-busy="true"]::after,
	.rg-button.is-loading::after,
	.rg-action-btn.is-loading::after {
		animation: none;
	}

}


/* ==========================================================================
   36. BUTTON ACCESSIBILITY CONTRACT
   ========================================================================== */

/*
 * Button implementation must preserve:
 *
 * - semantic button/link choice;
 * - keyboard accessibility;
 * - visible focus;
 * - readable text;
 * - sufficient contrast;
 * - touch usability;
 * - state communication.
 *
 * CSS does not replace semantic HTML or application authorization.
 */


/* ==========================================================================
   37. BUSINESS / SECURITY BOUNDARY
   ========================================================================== */

/*
 * A visible button does NOT mean an action is authorized.
 *
 * Button
 *    ↓
 * Approved interaction
 *    ↓
 * Application/API
 *    ↓
 * Backend authority
 *
 * This component must never:
 *
 * - approve payment;
 * - confirm booking;
 * - authorize a user;
 * - resolve a complaint;
 * - mutate business state;
 * - access the database.
 */


/* ==========================================================================
   38. BUTTON SYSTEM BOUNDARY
   ========================================================================== */

/*
 * One Rajgir Button System.
 *
 * Do NOT create:
 *
 * .home-button
 * .tourism-button
 * .market-button
 * .video-button
 * .profile-button
 *
 * when the same semantic Button component is sufficient.
 *
 * Use:
 *
 * .rg-button
 *
 * with an approved variant.
 */