/**
 * Super Elementor Pack — shared Button core styles.
 *
 * Widgets add the "sep-btn" class to their button element (in addition to
 * their own widget-specific class for padding/typography/etc.) and set
 * --sep-btn-bg-* / --sep-btn-bg-origin-* / --sep-btn-bg-clip-* /
 * --sep-btn-border-width-* / --sep-btn-border-color-* inline via
 * Button::get_style_vars() — one set per state (normal, hover, and optionally active).
 *
 * Gradient borders use dual-layer background clipping (padding-box + border-box)
 * matching Gradient_Border, so border-radius curves the gradient border seamlessly.
 *
 * !important is used deliberately on every property here: a plain
 * single-class selector like .sep-btn (specificity 0-1-0) can easily lose
 * to theme CSS that targets links/buttons more specifically, silently
 * hiding the button's color and/or border.
 */

.sep-btn {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;

	border-style: solid !important;
	border-width: var( --sep-btn-border-width-normal, 0px ) !important;
	border-color: var( --sep-btn-border-color-normal, transparent ) !important;

	background: var( --sep-btn-bg-normal, transparent ) !important;
	background-origin: var( --sep-btn-bg-origin-normal, padding-box ) !important;
	background-clip: var( --sep-btn-bg-clip-normal, border-box ) !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sep-btn:hover {
	border-width: var( --sep-btn-border-width-hover, var( --sep-btn-border-width-normal, 0px ) ) !important;
	border-color: var( --sep-btn-border-color-hover, var( --sep-btn-border-color-normal, transparent ) ) !important;
	background: var( --sep-btn-bg-hover, var( --sep-btn-bg-normal, transparent ) ) !important;
	background-origin: var( --sep-btn-bg-origin-hover, var( --sep-btn-bg-origin-normal, padding-box ) ) !important;
	background-clip: var( --sep-btn-bg-clip-hover, var( --sep-btn-bg-clip-normal, border-box ) ) !important;
}

.sep-btn:active {
	border-width: var( --sep-btn-border-width-active, var( --sep-btn-border-width-hover, var( --sep-btn-border-width-normal, 0px ) ) ) !important;
	border-color: var( --sep-btn-border-color-active, var( --sep-btn-border-color-hover, var( --sep-btn-border-color-normal, transparent ) ) ) !important;
	background: var( --sep-btn-bg-active, var( --sep-btn-bg-hover, var( --sep-btn-bg-normal, transparent ) ) ) !important;
	background-origin: var( --sep-btn-bg-origin-active, var( --sep-btn-bg-origin-hover, var( --sep-btn-bg-origin-normal, padding-box ) ) ) !important;
	background-clip: var( --sep-btn-bg-clip-active, var( --sep-btn-bg-clip-hover, var( --sep-btn-bg-clip-normal, border-box ) ) ) !important;
}