/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: buttons-theme.css
 * Description: Button Visual Themes
 *
 * Depends:
 * tokens.css
 * buttons.css
 *
 * Motion:
 * buttons-animations.css
 *
 * Version:
 * 2.0.1
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   PRIMARY
========================================================== */

.gm-btn-primary{

	background:var(--gm-color-primary);

	color:var(--gm-color-white);

	border-color:var(--gm-color-primary-hover);

	box-shadow:
		inset 0 1px 0 rgba(255,205,112,.28),
		0 5px 14px rgba(245,158,11,.14),
		0 2px 6px rgba(0,0,0,.06);

}

.gm-btn-primary:hover{

	background:var(--gm-color-primary-hover);

	color:var(--gm-color-white);

	border-color:var(--gm-color-primary-hover);

	box-shadow:
		inset 0 1px 0 rgba(255,213,126,.34),
		0 7px 18px rgba(245,158,11,.20),
		0 3px 8px rgba(0,0,0,.07);

}

.gm-btn-primary:active{

	background:var(--gm-color-primary-dark);

	color:var(--gm-color-white);

	border-color:var(--gm-color-primary-dark);

	box-shadow:
		inset 0 2px 4px rgba(0,0,0,.12),
		0 2px 6px rgba(245,158,11,.10);

}


/* ==========================================================
   SECONDARY
========================================================== */

.gm-btn-secondary{

	background:var(--gm-color-white);

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

	border-color:var(--gm-color-primary);

}

.gm-btn-secondary:hover{

	background:var(--gm-color-primary);

	color:var(--gm-color-white);

	border-color:var(--gm-color-primary);

}

.gm-btn-secondary:active{

	background:var(--gm-color-primary-hover);

	color:var(--gm-color-white);

	border-color:var(--gm-color-primary-hover);

}


/* ==========================================================
   OUTLINE
========================================================== */

.gm-btn-outline{

	background:transparent;

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

	border-color:var(--gm-color-border);

}

.gm-btn-outline:hover{

	background:var(--gm-color-background-soft);

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

	border-color:var(--gm-color-primary);

}

.gm-btn-outline:active{

	background:var(--gm-color-background-muted);

}


/* ==========================================================
   GHOST
========================================================== */

.gm-btn-ghost{

	background:transparent;

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

	border-color:transparent;

}

.gm-btn-ghost:hover{

	background:
		color-mix(
			in srgb,
			var(--gm-color-primary) 8%,
			transparent
		);

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

	border-color:transparent;

}

.gm-btn-ghost:active{

	background:
		color-mix(
			in srgb,
			var(--gm-color-primary) 13%,
			transparent
		);

}


/* ==========================================================
   LINK
========================================================== */

.gm-btn-link{

	min-height:auto;

	padding:0;

	border:0;

	border-radius:0;

	background:transparent;

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

	box-shadow:none;

}

.gm-btn-link:hover{

	background:transparent;

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

	box-shadow:none;

	text-decoration:underline;

	text-underline-offset:3px;

}

.gm-btn-link:active{

	color:var(--gm-color-primary-dark);

}


/* ==========================================================
   SUCCESS
========================================================== */

.gm-btn-success{

	background:var(--gm-color-success);

	color:var(--gm-color-white);

	border-color:var(--gm-color-success);

}

.gm-btn-success:hover{

	background:
		color-mix(
			in srgb,
			var(--gm-color-success) 88%,
			var(--gm-color-black)
		);

	color:var(--gm-color-white);

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-success) 88%,
			var(--gm-color-black)
		);

}


/* ==========================================================
   WARNING
========================================================== */

.gm-btn-warning{

	background:var(--gm-color-warning);

	color:var(--gm-color-black);

	border-color:var(--gm-color-warning);

}

.gm-btn-warning:hover{

	background:
		color-mix(
			in srgb,
			var(--gm-color-warning) 88%,
			var(--gm-color-black)
		);

	color:var(--gm-color-black);

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-warning) 88%,
			var(--gm-color-black)
		);

}


/* ==========================================================
   DANGER
========================================================== */

.gm-btn-danger{

	background:var(--gm-color-danger);

	color:var(--gm-color-white);

	border-color:var(--gm-color-danger);

}

.gm-btn-danger:hover{

	background:
		color-mix(
			in srgb,
			var(--gm-color-danger) 88%,
			var(--gm-color-black)
		);

	color:var(--gm-color-white);

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-danger) 88%,
			var(--gm-color-black)
		);

}


/* ==========================================================
   DARK
========================================================== */

.gm-btn-dark{

	background:var(--gm-color-text);

	color:var(--gm-color-white);

	border-color:var(--gm-color-text);

}

.gm-btn-dark:hover{

	background:var(--gm-color-black);

	color:var(--gm-color-white);

	border-color:var(--gm-color-black);

}


/* ==========================================================
   LIGHT
========================================================== */

.gm-btn-light{

	background:var(--gm-color-white);

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

	border-color:var(--gm-color-border);

}

.gm-btn-light:hover{

	background:var(--gm-color-background-soft);

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

	border-color:var(--gm-color-border);

}

.gm-btn-light:active{

	background:var(--gm-color-background-muted);

}


/* ==========================================================
   DISABLED VISUAL STATE
========================================================== */

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

	filter:saturate(.72);

}