/* Button Component
-------------------*/

/*
 * Empfehlung (neu):
 *   <button class="contextmind-ui-btn contextmind-ui-btn--danger">Löschen</button>
 *
 * Kompatibilität (alt) bleibt:
 *   <span class="contextmind-ui-btn--secondary">Abbrechen</span>
 *   <a class="btn btn-success">Speichern</a>
 */

/* Basis: Button-artige Elemente
--------------------------------*/

	.contextmind-ui-btn,
	.btn,
	.contextmind-ui-btn--primary,
	.contextmind-ui-btn--secondary,
	.contextmind-ui-btn--danger,
	.contextmind-ui-btn--ghost,
	.contextmind-ui-btn--link,
	.contextmind-ui-btn--filled,
	.contextmind-ui-btn--small,
	.contextmind-ui-btn--large,
	.contextmind-ui-btn--block,
	.ui-btn-primary,
	.btn-primary,
	.btn-secondary,
	.btn-success,
	.btn-danger,
	.btn-ghost,
	.btn-link,
	.btn-filled,
	.btn-small,
	.btn-large,
	.btn-block {
		--cm-btn-bg: #1a4a59;
		--cm-btn-bg-hover: #153e4b;
		--cm-btn-bg-active: #10323d;
		--cm-btn-color: #ffffff;
		--cm-btn-border: transparent;
		--cm-btn-shadow: none;
		--cm-btn-focus: rgba(26, 74, 89, 0.28);
		--cm-btn-radius: 6px;
		--cm-btn-font-size: 15px;
		--cm-btn-line-height: 1.2;
		--cm-btn-pad-y: 7px;
		--cm-btn-pad-x: 15px;
		--cm-btn-min-height: 37px;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-sizing: border-box;
		min-height: var(--cm-btn-min-height);
		padding: var(--cm-btn-pad-y) var(--cm-btn-pad-x);
		border: 1px solid var(--cm-btn-border);
		border-radius: var(--cm-btn-radius);
		background: var(--cm-btn-bg);
		box-shadow: var(--cm-btn-shadow);
		color: var(--cm-btn-color);
		font-size: var(--cm-btn-font-size);
		line-height: var(--cm-btn-line-height);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		appearance: none;
		-webkit-appearance: none;
		transition:
			background-color 120ms ease,
			border-color 120ms ease,
			color 120ms ease,
			box-shadow 120ms ease,
			opacity 120ms ease,
			transform 80ms ease;
	}

/* Inhalt / Icons
-----------------*/

	.contextmind-ui-btn *,
	.btn *,
	.contextmind-ui-btn--primary *,
	.contextmind-ui-btn--secondary *,
	.contextmind-ui-btn--danger *,
	.contextmind-ui-btn--ghost *,
	.contextmind-ui-btn--link *,
	.btn-primary *,
	.btn-secondary *,
	.btn-success *,
	.btn-danger *,
	.btn-ghost *,
	.btn-link * {
		color: inherit;
	}

	.contextmind-ui-btn .fa,
	.contextmind-ui-btn .mdi,
	.btn .fa,
	.btn .mdi,
	.contextmind-ui-btn--primary .fa,
	.contextmind-ui-btn--primary .mdi,
	.contextmind-ui-btn--secondary .fa,
	.contextmind-ui-btn--secondary .mdi,
	.contextmind-ui-btn--danger .fa,
	.contextmind-ui-btn--danger .mdi,
	.contextmind-ui-btn--ghost .fa,
	.contextmind-ui-btn--ghost .mdi,
	.contextmind-ui-btn--link .fa,
	.contextmind-ui-btn--link .mdi,
	.btn-primary .fa,
	.btn-primary .mdi,
	.btn-secondary .fa,
	.btn-secondary .mdi,
	.btn-success .fa,
	.btn-success .mdi,
	.btn-danger .fa,
	.btn-danger .mdi,
	.btn-ghost .fa,
	.btn-ghost .mdi,
	.btn-link .fa,
	.btn-link .mdi {
		font-size: 16px;
		line-height: 1;
		margin-right: 2px;
		vertical-align: middle;
	}

	.contextmind-ui-btn img,
	.btn img,
	.contextmind-ui-btn--primary img,
	.contextmind-ui-btn--secondary img,
	.contextmind-ui-btn--danger img,
	.contextmind-ui-btn--ghost img,
	.contextmind-ui-btn--link img,
	.btn-primary img,
	.btn-secondary img,
	.btn-success img,
	.btn-danger img,
	.btn-ghost img,
	.btn-link img {
		display: inline-block;
		width: 18px;
		height: 18px;
		object-fit: contain;
		vertical-align: middle;
	}

	.fa {
		color: inherit;
	}

/* Interaktionen / Zustände
---------------------------*/

	.contextmind-ui-btn:hover,
	.btn:hover,
	.contextmind-ui-btn--primary:hover,
	.contextmind-ui-btn--secondary:hover,
	.contextmind-ui-btn--danger:hover,
	.contextmind-ui-btn--ghost:hover,
	.contextmind-ui-btn--link:hover,
	.btn-primary:hover,
	.btn-secondary:hover,
	.btn-success:hover,
	.btn-danger:hover,
	.btn-ghost:hover,
	.btn-link:hover {
		background: var(--cm-btn-bg-hover);
		color: var(--cm-btn-color);
		border-color: var(--cm-btn-border);
		text-decoration: none;
	}

	.contextmind-ui-btn:active,
	.btn:active,
	.contextmind-ui-btn--primary:active,
	.contextmind-ui-btn--secondary:active,
	.contextmind-ui-btn--danger:active,
	.contextmind-ui-btn--ghost:active,
	.contextmind-ui-btn--link:active,
	.btn-primary:active,
	.btn-secondary:active,
	.btn-success:active,
	.btn-danger:active,
	.btn-ghost:active,
	.btn-link:active {
		background: var(--cm-btn-bg-active);
		transform: translateY(1px);
	}

	.contextmind-ui-btn:focus,
	.btn:focus,
	.contextmind-ui-btn--primary:focus,
	.contextmind-ui-btn--secondary:focus,
	.contextmind-ui-btn--danger:focus,
	.contextmind-ui-btn--ghost:focus,
	.contextmind-ui-btn--link:focus,
	.btn-primary:focus,
	.btn-secondary:focus,
	.btn-success:focus,
	.btn-danger:focus,
	.btn-ghost:focus,
	.btn-link:focus {
		outline: none;
	}

	.contextmind-ui-btn:focus-visible,
	.btn:focus-visible,
	.contextmind-ui-btn--primary:focus-visible,
	.contextmind-ui-btn--secondary:focus-visible,
	.contextmind-ui-btn--danger:focus-visible,
	.contextmind-ui-btn--ghost:focus-visible,
	.contextmind-ui-btn--link:focus-visible,
	.btn-primary:focus-visible,
	.btn-secondary:focus-visible,
	.btn-success:focus-visible,
	.btn-danger:focus-visible,
	.btn-ghost:focus-visible,
	.btn-link:focus-visible {
		box-shadow:
			var(--cm-btn-shadow),
			0 0 0 3px var(--cm-btn-focus);
	}

	.contextmind-ui-btn[disabled],
	.contextmind-ui-btn:disabled,
	.btn[disabled],
	.btn:disabled,
	.contextmind-ui-btn--primary[disabled],
	.contextmind-ui-btn--secondary[disabled],
	.contextmind-ui-btn--danger[disabled],
	.contextmind-ui-btn--ghost[disabled],
	.contextmind-ui-btn--link[disabled],
	.btn-primary[disabled],
	.btn-secondary[disabled],
	.btn-success[disabled],
	.btn-danger[disabled],
	.btn-ghost[disabled],
	.btn-link[disabled],
	.contextmind-ui-btn.is-disabled,
	.contextmind-ui-btn.mod-disabled,
	.contextmind-ui-btn--secondary.is-disabled,
	.contextmind-ui-btn--danger.is-disabled,
	.contextmind-ui-btn--ghost.is-disabled,
	.contextmind-ui-btn--link.is-disabled,
	.btn.is-disabled,
	.btn-secondary.is-disabled,
	.btn-success.is-disabled,
	.btn-danger.is-disabled,
	.btn-ghost.is-disabled,
	.btn-link.is-disabled,
	[data-inactive="1"] {
		opacity: 0.55;
		cursor: not-allowed;
		pointer-events: none;
	}

	.contextmind-ui-btn.is-loading,
	.contextmind-ui-btn.mod-loading,
	.contextmind-ui-btn--secondary.is-loading,
	.contextmind-ui-btn--danger.is-loading,
	.contextmind-ui-btn--ghost.is-loading,
	.contextmind-ui-btn--link.is-loading,
	.btn.is-loading,
	.btn-secondary.is-loading,
	.btn-success.is-loading,
	.btn-danger.is-loading,
	.btn-ghost.is-loading,
	.btn-link.is-loading,
	[aria-busy="true"].contextmind-ui-btn,
	[aria-busy="true"].btn {
		cursor: progress;
		opacity: 0.85;
		pointer-events: none;
	}

/* Varianten: Primary (Default)
-------------------------------*/

	.contextmind-ui-btn,
	.contextmind-ui-btn--primary,
	.btn,
	.btn-primary,
	.btn-success,
	.ui-btn-primary {
		--cm-btn-bg: #1a4a59;
		--cm-btn-bg-hover: #153e4b;
		--cm-btn-bg-active: #10323d;
		--cm-btn-color: #ffffff;
		--cm-btn-border: #1a4a59;
		--cm-btn-shadow: none;
		--cm-btn-focus: rgba(26, 74, 89, 0.28);
	}

/* Varianten: Secondary
-----------------------*/

	.contextmind-ui-btn--secondary,
	.btn-secondary,
	.contextmind-ui-btn.is-secondary,
	.btn.is-secondary {
		--cm-btn-bg: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
		--cm-btn-bg-hover: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%);
		--cm-btn-bg-active: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 100%);
		--cm-btn-color: #454545;
		--cm-btn-border: #dcdcdc;
		--cm-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
		--cm-btn-focus: rgba(100, 116, 139, 0.22);
	}

	.contextmind-ui-btn--secondary:hover,
	.btn-secondary:hover,
	.contextmind-ui-btn.is-secondary:hover,
	.btn.is-secondary:hover {
		color: #2f2f2f !important;
		border-color: #c6c6c6;
	}

/* Varianten: Danger
--------------------*/

	.contextmind-ui-btn--danger,
	.btn-danger,
	.contextmind-ui-btn.is-danger,
	.btn.is-danger {
		--cm-btn-bg: #c44536;
		--cm-btn-bg-hover: #b33e31;
		--cm-btn-bg-active: #a4372b;
		--cm-btn-color: #ffffff;
		--cm-btn-border: #c44536;
		--cm-btn-focus: rgba(196, 69, 54, 0.26);
	}

/* Varianten: Ghost / Tertiary
------------------------------*/

	.contextmind-ui-btn--ghost,
	.btn-ghost,
	.contextmind-ui-btn.is-ghost,
	.btn.is-ghost {
		--cm-btn-bg: transparent;
		--cm-btn-bg-hover: rgba(15, 23, 42, 0.06);
		--cm-btn-bg-active: rgba(15, 23, 42, 0.1);
		--cm-btn-color: #344054;
		--cm-btn-border: transparent;
		--cm-btn-focus: rgba(100, 116, 139, 0.22);
	}

/* Varianten: Link
------------------*/

	.contextmind-ui-btn--link,
	.btn-link,
	.contextmind-ui-btn.is-link,
	.btn.is-link {
		--cm-btn-bg: transparent;
		--cm-btn-bg-hover: transparent;
		--cm-btn-bg-active: transparent;
		--cm-btn-color: #1a4a59;
		--cm-btn-border: transparent;
		--cm-btn-shadow: none;
		--cm-btn-focus: rgba(26, 74, 89, 0.2);

		padding-left: 2px;
		padding-right: 2px;
		min-height: auto;
	}

	.contextmind-ui-btn--link:hover,
	.btn-link:hover,
	.contextmind-ui-btn.is-link:hover,
	.btn.is-link:hover {
		text-decoration: underline;
	}

/* Varianten: Filled (Legacy Alias)
-----------------------------------*/

	.contextmind-ui-btn--filled,
	.btn-filled {
		--cm-btn-bg: linear-gradient(to bottom, #f6f6f6 5%, #eeeeee 100%);
		--cm-btn-bg-hover: linear-gradient(to bottom, #fafafa 5%, #e9e9e9 100%);
		--cm-btn-bg-active: linear-gradient(to bottom, #e7e7e7 5%, #f3f3f3 100%);
		--cm-btn-color: #222222;
		--cm-btn-border: #dddddd;
		--cm-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
		--cm-btn-focus: rgba(100, 116, 139, 0.2);
	}

/* Größen
---------*/

	.contextmind-ui-btn--small,
	.btn-small,
	.contextmind-ui-btn.is-small,
	.btn.is-small {
		--cm-btn-font-size: 13px;
		--cm-btn-pad-y: 4px;
		--cm-btn-pad-x: 10px;
		--cm-btn-min-height: 30px;
		gap: 5px;
	}

	.contextmind-ui-btn--large,
	.btn-large,
	.contextmind-ui-btn.is-large,
	.btn.is-large {
		--cm-btn-font-size: 16px;
		--cm-btn-pad-y: 10px;
		--cm-btn-pad-x: 18px;
		--cm-btn-min-height: 44px;
		gap: 8px;
	}

/* Layout-Modifier
------------------*/

	.contextmind-ui-btn--block,
	.btn-block,
	.contextmind-ui-btn.is-block,
	.btn.is-block {
		display: flex;
		width: 100%;
	}

	.contextmind-ui-btn.mod-icononly,
	.contextmind-ui-btn--primary.mod-icononly,
	.contextmind-ui-btn--secondary.mod-icononly,
	.contextmind-ui-btn--danger.mod-icononly,
	.contextmind-ui-btn--ghost.mod-icononly,
	.contextmind-ui-btn--link.mod-icononly,
	.contextmind-ui-btn--small.mod-icononly,
	.btn.btn-icon-only,
	.btn-primary.btn-icon-only,
	.btn-secondary.btn-icon-only,
	.btn-success.btn-icon-only,
	.btn-danger.btn-icon-only,
	.btn-ghost.btn-icon-only,
	.btn-link.btn-icon-only,
	.btn-small.btn-icon-only {
		padding-left: 10px !important;
		padding-right: 10px !important;
		gap: 0;
	}

	.contextmind-ui-btn.mod-icononly .fa,
	.contextmind-ui-btn.mod-icononly .mdi,
	.contextmind-ui-btn--primary.mod-icononly .fa,
	.contextmind-ui-btn--primary.mod-icononly .mdi,
	.contextmind-ui-btn--secondary.mod-icononly .fa,
	.contextmind-ui-btn--secondary.mod-icononly .mdi,
	.contextmind-ui-btn--danger.mod-icononly .fa,
	.contextmind-ui-btn--danger.mod-icononly .mdi,
	.contextmind-ui-btn--ghost.mod-icononly .fa,
	.contextmind-ui-btn--ghost.mod-icononly .mdi,
	.contextmind-ui-btn--link.mod-icononly .fa,
	.contextmind-ui-btn--link.mod-icononly .mdi,
	.contextmind-ui-btn--small.mod-icononly .fa,
	.contextmind-ui-btn--small.mod-icononly .mdi,
	.btn.btn-icon-only .fa,
	.btn.btn-icon-only .mdi,
	.btn-primary.btn-icon-only .fa,
	.btn-primary.btn-icon-only .mdi,
	.btn-secondary.btn-icon-only .fa,
	.btn-secondary.btn-icon-only .mdi,
	.btn-success.btn-icon-only .fa,
	.btn-success.btn-icon-only .mdi,
	.btn-danger.btn-icon-only .fa,
	.btn-danger.btn-icon-only .mdi,
	.btn-ghost.btn-icon-only .fa,
	.btn-ghost.btn-icon-only .mdi,
	.btn-link.btn-icon-only .fa,
	.btn-link.btn-icon-only .mdi,
	.btn-small.btn-icon-only .fa,
	.btn-small.btn-icon-only .mdi {
		margin-right: 0 !important;
	}

/* Buttons als Links
--------------------*/

	a.contextmind-ui-btn,
	a.contextmind-ui-btn--primary,
	a.contextmind-ui-btn--secondary,
	a.contextmind-ui-btn--danger,
	a.contextmind-ui-btn--ghost,
	a.contextmind-ui-btn--link,
	a.btn,
	a.btn-primary,
	a.btn-secondary,
	a.btn-success,
	a.btn-danger,
	a.btn-ghost,
	a.btn-link {
		text-decoration: none;
	}

/* Legacy: Hover-Menü in Buttons
--------------------------------*/

	.btn-menu {
		display: none;
	}

	.btn:hover .btn-menu {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		max-width: 200px;
		background-color: #ffffff;
		border-radius: 7px;
		box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.75);
	}

	.btn:hover .btn-menu li {
		display: block;
		padding: 7px 15px;
		color: #333333;
		border-bottom: 1px solid #dddddd;
		text-align: left;
	}

	.btn:hover .btn-menu li:first-of-type {
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}

	.btn:hover .btn-menu li:last-of-type {
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
		border-bottom: none;
	}

	.btn:hover .btn-menu li .fa {
		padding-right: 5px;
	}

	.btn:hover .btn-menu li:hover {
		background-color: #454545;
		color: #ffffff;
	}

/* Legacy: Icon als <img>-Tag
-----------------------------*/

	.contextmind-ui-btn-container,
	.btn-container .admin-ui-btn--delete {
		float: left;
		margin-left: 0 !important;
		padding-left: 10px;
		padding-right: 10px;
		opacity: 0.3;
	}

	.btn-container .admin-ui-btn--delete:hover {
		opacity: 1;
	}

	.btn-container .admin-ui-btn--delete img {
		margin: 0;
	}