/* base button with jquery ui support .ui-button */
.btn {
	--btn-bg: transparent;
	--btn-color: inherit;
	--btn-border: transparent;
	--btn-padding: 12px 20px;
	--btn-height: 40px;
	--btn-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--btn-font-size, 0.8125rem);
	font-family: var(--family-body);
	font-weight: 400;
	border-radius: var(--btn-radius);
	transition: background 0.2s ease,background-image 0.2s ease,color 0.2s ease,border 0.2s ease;
	cursor: pointer;
	border: .5px solid var(--btn-border);
	user-select: none;
	background: var(--btn-bg);
	color: var(--btn-color);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	height: var(--btn-height);
	gap:var(--btn-gap);
	box-shadow: var(--btn-shadow);
	margin: var(--btn-margin);
	line-height: 1;
	gap: var(--s-3, 0.25rem);
	text-decoration: none;
	white-space: nowrap;
	width: fit-content;
	background-image: var(--btn-bg-img);

}

.btn--hover,
.btn:hover,
.ui-state-hover {
	background: var(--btn-hover-bg);
	color: var(--btn-hover-color);
	border-color: var(--btn-hover-border);
	box-shadow: var(--btn-hover-shadow, inherit);
	background-image: var(--btn-bg-img-hover);
}
.btn--active,
.btn:active,
.ui-state-active {
	background: var(--btn-active-bg);
	color: var(--btn-active-color);
	border-color: var(--btn-active-border);
	box-shadow: var(--btn-active-shadow, inherit);
}

.btn--active,
.btn:active {
	/*transform: scale(0.95);*/
}

.btn--focus,
.btn:focus,
.ui-state-focus {
	outline: 2px solid var(--btn-focus-border);
	outline-offset: 2px;
	box-shadow: var(--btn-focus-shadow, inherit);
}

.btn--disabled,
.btn:disabled,
.ui-state-disabled,
.btn--disabled:hover,
.btn--disabled:active,
.btn--disabled:focus,
.btn--disabled:focus-visible,
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:focus,
.btn:disabled:focus-visible,
.ui-state-disabled:hover,
.ui-state-disabled:active,
.ui-state-disabled:focus,
.ui-state-disabled:focus-visible {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-color) !important;
  border-color: var(--btn-disabled-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* button sizes */
.btn,
.btn--xs {
	--btn-height: 1.75rem;
	--btn-padding-x: var(--s-5, 0.5rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--buttons-sm, 0.375rem);
	--btn-font-size: var(--type-size-xs, 0.8125rem);
}

.btn--2xs {
	--btn-height: 1.5rem;
	--btn-padding-x: var(--s-4, 0.5rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--buttons-sm, 0.375rem);
	--btn-font-size: var(--type-size-xs, 0.8125rem);
}

.btn--sm {
	--btn-height: 2rem;
	--btn-padding-x: var(--s-6, 0.625rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--buttons-md, 0.5rem);
	--btn-font-size: var(--type-size-xs, 0.8125rem);
}

.btn--md {
	--btn-height: 2.5rem;
	--btn-padding-x: var(--s-7, 0.75rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--buttons-md, 0.5rem);
	--btn-font-size: var(--type-size-sm, 0.875rem);
}

.btn--lg {
	--btn-height: 3rem;
	--btn-padding-x: var(--s-8, 1rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-4, 0.375rem);
	--btn-radius: var(--buttons-md, 0.5rem);
	--btn-font-size: var(--type-size-sm, 0.875rem);
}


.input--xs .btn {
	--btn-height: 18px;
	--btn-padding-x: var(--s-4, 0.375rem);
	--btn-margin: var(--s-3, 0.25rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--global-r-2, 0.25rem);
	--btn-font-size: var(--Type-Size-2xs, 0.75rem);
}

.input--sm .btn {
	--btn-height: 20px;
	--btn-padding-x: var(--s-4, 0.375rem);
	--btn-margin: var(--s-3, 0.25rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--global-r-2, 0.25rem);
	--btn-font-size: var(--Type-Size-2xs, 0.75rem);
}
.input--md .btn {
	--btn-height: 24px;
	--btn-margin: var(--s-3, 0.25rem);
	--btn-padding-x: var(--s-5, 0.5rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--global-r-2, 0.25rem);
	--btn-font-size: var(--type-size-xs, 0.8125rem);
}
.input--lg .btn {
	--btn-height: 32px;
	--btn-padding-x: var(--s-7, .75rem);
	--btn-margin: var(--s-3, 0.25rem);
	--btn-padding-y: var(--s-0, 0rem);
	--btn-gap: var(--s-3, 0.25rem);
	--btn-radius: var(--global-r-2, 0.25rem);
	--btn-font-size: var(--type-size-sm, 0.875rem);
}

.btn:not(:has(*)),
.ui-button-text-only {
	padding-left: calc(var(--btn-padding-x) +  var(--s-2));
	padding-right: calc(var(--btn-padding-x) +  var(--s-2));
}

.btn__label {
	padding-left: var(--s-2);
	padding-right: var(--s-2);
}


/* button shapes */
.btn--pill {
	--btn-radius: 999px;
}

/* button variants */
.btn,
.btn--primary {
	--btn-bg: var(--states-primary-primary, #ff007f);
	--btn-color: var(--text-inverted, #fff);
	--btn-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
	--btn-hover-bg: var(--states-primary-primary-hover, #252525);
	--btn-hover-color: var(--text-inverted, #fff);
	--btn-hover-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-active-bg: var(--states-primary-primary-pressed, #404040);
	--btn-active-color: var(--text-inverted, #fff);
	--btn-active-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-focus-border: var(--shadows-highlight-1, #cce5ff);
	--btn-disabled-bg: var(--states-primary-primary-disabled, rgba(48, 48, 48, 0.03));
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
	--btn-bg-img:linear-gradient(45deg, #ffffff47, transparent);
	--btn-bg-img-hover:linear-gradient(90deg, #ffffff47, transparent);
}

.btn--secondary {
	--btn-bg: var(--states-primary-secondary, #fff);
	--btn-color: var(--text-primary, #171717);
	--btn-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
	--btn-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-hover-bg: var(--states-primary-secondary-hover, #f9f9f9);
	--btn-hover-color: var(--text-primary, #171717);
	--btn-hover-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-active-bg: var(--states-primary-secondary-pressed, #f6f6f6);
	--btn-active-color: var(--text-primary, #171717);
	--btn-active-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-focus-border: var(--shadows-highlight-1, #cce5ff);
	--btn-disabled-bg: var(--states-primary-secondary-disabled, #f9f9f9);
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
}

.btn--tertiary {
	--btn-bg: var(--states-primary-tertiary, rgba(48, 48, 48, 0.03));
	--btn-color: var(--text-primary, #171717);
	--btn-border: transparent;
	--btn-hover-bg: var(--states-primary-tertiary-hover, rgba(48, 48, 48, 0.05));
	--btn-hover-color: var(--text-primary, #171717);
	--btn-hover-border: transparent;
	--btn-active-bg: var(--states-primary-tertiary-pressed, rgba(48, 48, 48, 0.07));
	--btn-active-color: var(--text-primary, #171717);
	--btn-active-border: transparent;
	--btn-focus-border: var(--shadows-highlight-1, #cce5ff);
	--btn-disabled-bg: var(--states-primary-secondary-disabled, #f9f9f9);
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
}

.btn--ghost {
	--btn-bg: var(--states-primary-ghost, rgba(48, 48, 48, 0.00));
	--btn-color: var(--text-primary, #171717);
	--btn-border: transparent;
	--btn-hover-bg: var(--states-primary-ghost-hover, rgba(48, 48, 48, 0.05));
	--btn-hover-color: var(--text-primary, #171717);
	--btn-hover-border: transparent;
	--btn-active-bg: var(--states-primary-ghost-pressed, rgba(48, 48, 48, 0.07));
	--btn-active-color: var(--text-primary, #171717);
	--btn-active-border: transparent;
	--btn-focus-border: var(--shadows-highlight-1, #cce5ff);
	--btn-disabled-bg: var(--states-primary-ghost-disabled, rgba(48, 48, 48, 0.00));
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
	--btn-shadow: none;
}

.btn--destructive {
	--btn-bg: var(--states-destructive-primary, #ef4444);
	--btn-color: var(--text-fixed-inverted, #fff);
	--btn-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
	--btn-hover-bg: var(--states-destructive-primary-hover, #dc2625);
	--btn-hover-color: var(--text-fixed-inverted, #fff);
	--btn-hover-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-active-bg: var(--states-destructive-primary-pressed, #c81e1d);
	--btn-active-color: var(--text-fixed-inverted, #fff);
	--btn-active-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-focus-border: var(--shadows-danger-1, #fed7d7);
	--btn-disabled-bg: var(--states-destructive-primary-disabled, rgba(48, 48, 48, 0.03));
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
}

.btn--positive {
	--btn-bg: var(--basic-green-bg-accent, #22C55D);
	--btn-color: var(--text-fixed-inverted, #fff);
	--btn-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-shadow: 0px -0.5px 0px 0px rgba(22, 25, 29, 0.12) inset, 0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
	--btn-hover-bg: var(--basic-green-bg-strong, #17A34A);
	--btn-hover-color: var(--text-fixed-inverted, #fff);
	--btn-hover-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-active-bg: var(--Basic-green-bg-contrast, #1B2D06);
	--btn-active-color: var(--text-fixed-inverted, #fff);
	--btn-active-border: var(--border-alpha-strong, rgba(48, 48, 48, 0.20));
	--btn-focus-border: var(--shadows-danger-1, #fed7d7);
	--btn-disabled-bg: var(--states-destructive-primary-disabled, rgba(48, 48, 48, 0.03));
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
}

.btn--component {
	--btn-bg: var(--purple-500, #8B5CF6);
	--btn-color: var(--text-fixed-inverted, #fff);
	--btn-border: transparent;
	--btn-hover-bg: var(--purple-600, #7C3AED);
	--btn-hover-color: var(--text-fixed-inverted, #fff);
	--btn-hover-border: transparent;
	--btn-active-bg: var(--states-primary-tertiary-pressed, rgba(48, 48, 48, 0.07));
	--btn-active-color: var(--text-primary, #171717);
	--btn-active-border: transparent;
	--btn-focus-border: var(--shadows-highlight-1, #cce5ff);
	--btn-disabled-bg: var(--states-primary-secondary-disabled, #f9f9f9);
	--btn-disabled-color: var(--text-disabled, rgba(48, 48, 48, 0.24));
	--btn-disabled-border: transparent;
}

.btn__icon-text {
	margin-right: var(--s-2, 0.5rem);
}

/* icon button */
.btn--icon {
	padding: 0;
	width: var(--btn-height);
	height: var(--btn-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn--loading {
	position: relative;
	pointer-events: none;
	cursor: wait !important;
	background: var(--btn-disabled-bg, rgba(48, 48, 48, 0.03)) !important;
	color: transparent !important;
	border-color: var(--btn-disabled-border, transparent) !important;
	box-shadow: none !important;
}

.btn--loading * {
	visibility: hidden;
}

 .btn--loading::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid rgba(48, 48, 48, 0.2);
	border-top-color: rgba(48, 48, 48, 0.6);
	animation: btn-loading 0.6s linear infinite;
	margin-right: 0.5em;
	vertical-align: middle;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

 @keyframes btn-loading {
	 0% {
		 transform: translate(-50%, -50%) rotate(0deg);
	}
	 100% {
		 transform: translate(-50%, -50%) rotate(360deg);
	}
}


/* jQuery UI Corner Classes */
.ui-corner-all {
	border-radius: var(--btn-radius);
}
.ui-corner-top {
	border-radius: var(--btn-radius) var(--btn-radius) 0 0;
}
.ui-corner-bottom {
	border-radius: 0 0 var(--btn-radius) var(--btn-radius);
}
.ui-corner-left {
	border-radius: var(--btn-radius) 0 0 var(--btn-radius);
}
.ui-corner-right {
	border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
}