/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: buttons.css
 * Description: Global Button Structure
 *
 * Depends:
 * tokens.css
 *
 * Motion:
 * buttons-animations.css
 *
 * Theme:
 * buttons-theme.css
 *
 * Version:
 * 2.0.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   BASE
========================================================== */

.gm-btn,
button.gm-btn,
a.gm-btn,
input.gm-btn{

	/* Component-local values */

	--gm-btn-icon-size:18px;
	--gm-btn-spinner-size:18px;

	position:relative;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:var(--gm-space-sm);

	min-height:var(--gm-button-height-md);

	padding:var(--gm-button-padding);

	border:1px solid transparent;

	border-radius:var(--gm-radius-pill);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-md);

	font-weight:var(--gm-font-weight-semibold);

	line-height:1;

	letter-spacing:.02em;

	text-align:center;

	text-decoration:none;

	white-space:nowrap;

	vertical-align:middle;

	box-sizing:border-box;

	appearance:none;

	-webkit-appearance:none;

	user-select:none;

	-webkit-user-select:none;

	cursor:pointer;

}


/* ==========================================================
   ICON
========================================================== */

.gm-btn svg{

	width:var(--gm-btn-icon-size);

	height:var(--gm-btn-icon-size);

	flex:0 0 auto;

	pointer-events:none;

}

.gm-btn img{

	width:var(--gm-btn-icon-size);

	height:var(--gm-btn-icon-size);

	flex:0 0 auto;

	object-fit:contain;

}


/* ==========================================================
   SIZE — SMALL
========================================================== */

.gm-btn-sm{

	min-height:var(--gm-button-height-sm);

	padding:
		0
		var(--gm-space-md);

	font-size:var(--gm-font-size-sm);

}


/* ==========================================================
   SIZE — MEDIUM
========================================================== */

.gm-btn-md{

	min-height:var(--gm-button-height-md);

}


/* ==========================================================
   SIZE — LARGE
========================================================== */

.gm-btn-lg{

	min-height:var(--gm-button-height-lg);

	padding:
		0
		var(--gm-space-xl);

	font-size:var(--gm-font-size-md);

}


/* ==========================================================
   BLOCK
========================================================== */

.gm-btn-block{

	width:100%;

}


/* ==========================================================
   ICON ONLY
========================================================== */

.gm-btn-icon{

	width:var(--gm-button-height-md);

	height:var(--gm-button-height-md);

	min-height:var(--gm-button-height-md);

	padding:0;

	border-radius:50%;

	flex:0 0 auto;

}


/* ==========================================================
   FLOATING ACTION BUTTON
========================================================== */

.gm-btn-fab{

	width:60px;

	height:60px;

	min-height:60px;

	padding:0;

	border-radius:50%;

	flex:0 0 auto;

}


/* ==========================================================
   DISABLED
========================================================== */

.gm-btn:disabled,
.gm-btn.is-disabled,
.gm-btn[aria-disabled="true"]{

	opacity:.45;

	cursor:not-allowed;

	pointer-events:none;

}


/* ==========================================================
   LOADING
========================================================== */

.gm-btn.is-loading{

	pointer-events:none;

	cursor:wait;

}

.gm-btn.is-loading > *{

	visibility:hidden;

}

.gm-btn.is-loading::after{

	content:"";

	position:absolute;

	top:50%;

	left:50%;

	width:var(--gm-btn-spinner-size);

	height:var(--gm-btn-spinner-size);

	border:2px solid currentColor;

	border-right-color:transparent;

	border-radius:50%;

	transform:translate(-50%,-50%);

	animation:
		gm-button-spin
		.7s
		linear
		infinite;

}


/* ==========================================================
   ALIGNMENT
========================================================== */

.gm-btn-left{

	justify-content:flex-start;

	text-align:left;

}

.gm-btn-center{

	justify-content:center;

	text-align:center;

}

.gm-btn-right{

	justify-content:flex-end;

	text-align:right;

}


/* ==========================================================
   BUTTON GROUP
========================================================== */

.gm-btn-group{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:var(--gm-gap-sm);

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

	.gm-btn-block-mobile{

		width:100%;

	}

}