.iddd-btn-wrap {
	display: flex;
	width: 100%;
}

.iddd-btn {
	--iddd-btn-bg: #111;
	--iddd-btn-fg: #fafafa;
	--iddd-btn-bd: transparent;
	--iddd-btn-shadow: none;
	--iddd-btn-pad-y: 12px;
	--iddd-btn-pad-x: 22px;
	--iddd-btn-fs: 14px;
	--iddd-btn-lh: 1.25;
	--iddd-btn-min-h: 44px;
	--iddd-btn-radius: 4px;
	--iddd-btn-gap: 8px;
	--iddd-btn-icon: 1em;
	--iddd-btn-fw: 600;
	--iddd-btn-track: 0.01em;
	--iddd-btn-rule-c: currentColor;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--iddd-btn-min-h);
	padding: var(--iddd-btn-pad-y) var(--iddd-btn-pad-x);
	margin: 0;
	border: 1px solid var(--iddd-btn-bd);
	border-radius: var(--iddd-btn-radius);
	background: var(--iddd-btn-bg);
	color: var(--iddd-btn-fg);
	font-family: inherit;
	font-size: var(--iddd-btn-fs);
	font-weight: var(--iddd-btn-fw);
	letter-spacing: var(--iddd-btn-track);
	line-height: var(--iddd-btn-lh);
	text-decoration: none;
	text-align: center;
	box-shadow: var(--iddd-btn-shadow);
	cursor: pointer;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.iddd-btn:hover,
.iddd-btn:focus {
	background: var(--iddd-btn-bg-hover, var(--iddd-btn-bg));
	border-color: var(--iddd-btn-bd-hover, var(--iddd-btn-bd));
	color: var(--iddd-btn-fg-hover, var(--iddd-btn-fg));
	box-shadow: var(--iddd-btn-shadow-hover, var(--iddd-btn-shadow));
	text-decoration: none;
}

.iddd-btn:focus {
	outline: none;
}

.iddd-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.iddd-btn__inner,
.iddd-btn__lead,
.iddd-btn__icon {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.iddd-btn__inner {
	justify-content: inherit;
}

.iddd-btn__lead,
.iddd-btn__icon {
	flex: 0 0 auto;
}

.iddd-btn__lead {
	gap: var(--iddd-btn-gap);
}

.iddd-btn__icon {
	justify-content: center;
	line-height: 0;
}

.iddd-btn__icon svg,
.iddd-btn__icon i,
.iddd-btn__img {
	width: var(--iddd-btn-icon);
	height: var(--iddd-btn-icon);
	font-size: var(--iddd-btn-icon);
}

.iddd-btn__icon svg {
	fill: currentColor;
}

.iddd-btn__img {
	display: block;
	box-sizing: border-box;
	object-fit: contain;
	object-position: center;
	overflow: hidden;
}

.iddd-btn__icon-text,
.iddd-btn__label {
	flex: 0 0 auto;
	white-space: nowrap;
}

.iddd-btn__icon-text {
	line-height: 1;
	font-size: var(--iddd-btn-icon);
}

.iddd-btn__rule-track {
	display: none;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

.iddd-btn__rule {
	display: block;
	box-sizing: border-box;
	width: var(--iddd-btn-rule-w, 100%);
	max-width: 100%;
	height: var(--iddd-btn-rule-h, 1.5px);
	background-color: var(--iddd-btn-rule-c, currentColor);
	border-radius: var(--iddd-btn-rule-cap, 999px);
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.iddd-btn-rule-cap-square .iddd-btn__rule {
	--iddd-btn-rule-cap: 0;
	border-radius: 0;
}

.iddd-btn-rule-dashed .iddd-btn__rule {
	--iddd-btn-rule-dash: max(8px, calc(var(--iddd-btn-rule-h, 1.5px) * 6));
	--iddd-btn-rule-dash-gap: max(4px, calc(var(--iddd-btn-rule-h, 1.5px) * 3.5));
	--iddd-btn-rule-mask: repeating-linear-gradient(90deg, #000 0 var(--iddd-btn-rule-dash), transparent var(--iddd-btn-rule-dash) calc(var(--iddd-btn-rule-dash) + var(--iddd-btn-rule-dash-gap)));
	-webkit-mask-image: var(--iddd-btn-rule-mask);
	mask-image: var(--iddd-btn-rule-mask);
}

.iddd-btn-rule-zigzag .iddd-btn__rule {
	--iddd-btn-rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 L4 1 L8 4 L12 7 L16 4' fill='none' stroke='%23000' stroke-width='1.35' stroke-linejoin='miter'/%3E%3C/svg%3E");
	height: max(8px, calc(var(--iddd-btn-rule-h, 1.5px) * 6));
	border-radius: 0;
	-webkit-mask-image: var(--iddd-btn-rule-mask);
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: calc(max(8px, var(--iddd-btn-rule-h, 1.5px) * 6) * 1.7) 100%;
	mask-image: var(--iddd-btn-rule-mask);
	mask-repeat: repeat-x;
	mask-size: calc(max(8px, var(--iddd-btn-rule-h, 1.5px) * 6) * 1.7) 100%;
}

.iddd-btn-rule-pointed .iddd-btn__rule {
	--iddd-btn-rule-mark: max(8px, calc(var(--iddd-btn-rule-h, 1.5px) * 5));
	--iddd-btn-rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpolygon points='0,4 5,0 10,4 5,8' fill='%23000'/%3E%3C/svg%3E");
	height: var(--iddd-btn-rule-mark);
	border-radius: 0;
	-webkit-mask-image: var(--iddd-btn-rule-mask);
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: var(--iddd-btn-rule-mark) var(--iddd-btn-rule-mark);
	mask-image: var(--iddd-btn-rule-mask);
	mask-repeat: repeat-x;
	mask-size: var(--iddd-btn-rule-mark) var(--iddd-btn-rule-mark);
}

.iddd-btn-rule-circle .iddd-btn__rule {
	--iddd-btn-rule-mark: max(6px, calc(var(--iddd-btn-rule-h, 1.5px) * 4));
	height: var(--iddd-btn-rule-mark);
	border-radius: 0;
	-webkit-mask-image: radial-gradient(circle closest-side at center, #000 86%, transparent 87%);
	-webkit-mask-size: calc(var(--iddd-btn-rule-mark) * 1.55) 100%;
	-webkit-mask-repeat: repeat-x;
	mask-image: radial-gradient(circle closest-side at center, #000 86%, transparent 87%);
	mask-size: calc(var(--iddd-btn-rule-mark) * 1.55) 100%;
	mask-repeat: repeat-x;
}

.iddd-btn-rule-square .iddd-btn__rule {
	--iddd-btn-rule-mark: max(6px, calc(var(--iddd-btn-rule-h, 1.5px) * 4));
	--iddd-btn-rule-mask: repeating-linear-gradient(90deg, #000 0 var(--iddd-btn-rule-mark), transparent var(--iddd-btn-rule-mark) calc(var(--iddd-btn-rule-mark) * 1.55));
	height: var(--iddd-btn-rule-mark);
	border-radius: 0;
	-webkit-mask-image: var(--iddd-btn-rule-mask);
	mask-image: var(--iddd-btn-rule-mask);
}

/* Presets: wrapper prefix_class so the editor updates live. */
.iddd-btn-variant-filled .iddd-btn {
	--iddd-btn-bg: #111;
	--iddd-btn-fg: #fafafa;
	--iddd-btn-bd: transparent;
	--iddd-btn-radius: 4px;
	--iddd-btn-fw: 600;
	--iddd-btn-min-h: 44px;
	--iddd-btn-pad-y: 12px;
	--iddd-btn-pad-x: 22px;
	--iddd-btn-bg-hover: #2a2a2a;
	--iddd-btn-fg-hover: #fafafa;
	--iddd-btn-bd-hover: transparent;
}

.iddd-btn-variant-outline .iddd-btn,
.iddd-btn-variant-outline_black .iddd-btn,
.iddd-btn-variant-invert .iddd-btn {
	--iddd-btn-bg: transparent;
	--iddd-btn-fg: #111;
	--iddd-btn-bd: #111;
	--iddd-btn-bg-hover: #111;
	--iddd-btn-fg-hover: #fafafa;
	--iddd-btn-bd-hover: #111;
}

.iddd-btn-variant-outline_white .iddd-btn {
	--iddd-btn-bg: transparent;
	--iddd-btn-fg: #fff;
	--iddd-btn-bd: #fff;
	--iddd-btn-bg-hover: #fff;
	--iddd-btn-fg-hover: #111;
	--iddd-btn-bd-hover: #fff;
}

.iddd-btn-variant-filled_white .iddd-btn {
	--iddd-btn-bg: #fff;
	--iddd-btn-fg: #111;
	--iddd-btn-bd: #fff;
	--iddd-btn-bg-hover: #111;
	--iddd-btn-fg-hover: #fff;
	--iddd-btn-bd-hover: #111;
}

.iddd-btn-variant-ghost .iddd-btn {
	--iddd-btn-bg: rgba(17, 17, 17, 0.06);
	--iddd-btn-fg: #111;
	--iddd-btn-bd: transparent;
	--iddd-btn-bg-hover: rgba(17, 17, 17, 0.12);
}

.iddd-btn-variant-pill .iddd-btn {
	--iddd-btn-bg: #111;
	--iddd-btn-fg: #fafafa;
	--iddd-btn-bd: #111;
	--iddd-btn-radius: 999px;
	--iddd-btn-bg-hover: #2a2a2a;
}

.iddd-btn-variant-hairline .iddd-btn {
	--iddd-btn-bg: transparent;
	--iddd-btn-fg: #111;
	--iddd-btn-bd: rgba(17, 17, 17, 0.28);
	--iddd-btn-radius: 2px;
	--iddd-btn-fw: 500;
	--iddd-btn-bg-hover: #111;
	--iddd-btn-fg-hover: #fafafa;
	--iddd-btn-bd-hover: #111;
	--iddd-btn-track: 0.04em;
}

.iddd-btn-variant-underline .iddd-btn {
	--iddd-btn-bg: transparent;
	--iddd-btn-fg: #111;
	--iddd-btn-bd: transparent;
	--iddd-btn-min-h: 0;
	--iddd-btn-pad-y: 4px;
	--iddd-btn-pad-x: 0;
	--iddd-btn-radius: 0;
	--iddd-btn-fw: 500;
	border: 0;
	border-bottom: 1px solid currentColor;
}

.iddd-btn-variant-underline .iddd-btn:hover,
.iddd-btn-variant-underline .iddd-btn:focus {
	background: transparent;
	opacity: 0.65;
}

.iddd-btn-variant-text_line .iddd-btn {
	--iddd-btn-bg: transparent;
	--iddd-btn-fg: #111;
	--iddd-btn-bd: transparent;
	--iddd-btn-min-h: 36px;
	--iddd-btn-pad-y: 6px;
	--iddd-btn-pad-x: 0;
	--iddd-btn-radius: 0;
	--iddd-btn-fw: 500;
	width: 100%;
	justify-content: flex-start;
	border: 0;
}

.iddd-btn-variant-text_line .iddd-btn__inner {
	width: 100%;
	flex: 1 1 auto;
	gap: var(--iddd-btn-rule-gap, 10px);
}

.iddd-btn-variant-text_line .iddd-btn__rule-track {
	display: flex;
}

.iddd-btn-variant-text_line .iddd-btn:hover .iddd-btn__rule,
.iddd-btn-variant-text_line .iddd-btn:focus .iddd-btn__rule {
	opacity: 0.85;
}

.iddd-btn-size-xs .iddd-btn { --iddd-btn-pad-y: 6px; --iddd-btn-pad-x: 12px; --iddd-btn-fs: 12px; --iddd-btn-min-h: 32px; }
.iddd-btn-size-sm .iddd-btn { --iddd-btn-pad-y: 8px; --iddd-btn-pad-x: 16px; --iddd-btn-fs: 13px; --iddd-btn-min-h: 36px; }
.iddd-btn-size-md .iddd-btn { --iddd-btn-pad-y: 12px; --iddd-btn-pad-x: 22px; --iddd-btn-fs: 14px; --iddd-btn-min-h: 44px; }
.iddd-btn-size-lg .iddd-btn { --iddd-btn-pad-y: 14px; --iddd-btn-pad-x: 28px; --iddd-btn-fs: 16px; --iddd-btn-min-h: 48px; }
.iddd-btn-size-xl .iddd-btn { --iddd-btn-pad-y: 16px; --iddd-btn-pad-x: 36px; --iddd-btn-fs: 18px; --iddd-btn-min-h: 56px; }

.iddd-btn-align-left .iddd-btn-wrap { justify-content: flex-start; }
.iddd-btn-align-center .iddd-btn-wrap { justify-content: center; }
.iddd-btn-align-right .iddd-btn-wrap { justify-content: flex-end; }
.iddd-btn-align-justify .iddd-btn { width: 100%; }

@media (max-width: 1024px) {
	.iddd-btn-tablet-size-xs .iddd-btn { --iddd-btn-pad-y: 6px; --iddd-btn-pad-x: 12px; --iddd-btn-fs: 12px; --iddd-btn-min-h: 32px; }
	.iddd-btn-tablet-size-sm .iddd-btn { --iddd-btn-pad-y: 8px; --iddd-btn-pad-x: 16px; --iddd-btn-fs: 13px; --iddd-btn-min-h: 36px; }
	.iddd-btn-tablet-size-md .iddd-btn { --iddd-btn-pad-y: 12px; --iddd-btn-pad-x: 22px; --iddd-btn-fs: 14px; --iddd-btn-min-h: 44px; }
	.iddd-btn-tablet-size-lg .iddd-btn { --iddd-btn-pad-y: 14px; --iddd-btn-pad-x: 28px; --iddd-btn-fs: 16px; --iddd-btn-min-h: 48px; }
	.iddd-btn-tablet-size-xl .iddd-btn { --iddd-btn-pad-y: 16px; --iddd-btn-pad-x: 36px; --iddd-btn-fs: 18px; --iddd-btn-min-h: 56px; }
	.iddd-btn-tablet-align-left .iddd-btn-wrap { justify-content: flex-start; }
	.iddd-btn-tablet-align-center .iddd-btn-wrap { justify-content: center; }
	.iddd-btn-tablet-align-right .iddd-btn-wrap { justify-content: flex-end; }
	.iddd-btn-tablet-align-justify .iddd-btn { width: 100%; }
}

@media (max-width: 767px) {
	.iddd-btn-mobile-size-xs .iddd-btn { --iddd-btn-pad-y: 6px; --iddd-btn-pad-x: 12px; --iddd-btn-fs: 12px; --iddd-btn-min-h: 32px; }
	.iddd-btn-mobile-size-sm .iddd-btn { --iddd-btn-pad-y: 8px; --iddd-btn-pad-x: 16px; --iddd-btn-fs: 13px; --iddd-btn-min-h: 36px; }
	.iddd-btn-mobile-size-md .iddd-btn { --iddd-btn-pad-y: 12px; --iddd-btn-pad-x: 22px; --iddd-btn-fs: 14px; --iddd-btn-min-h: 44px; }
	.iddd-btn-mobile-size-lg .iddd-btn { --iddd-btn-pad-y: 14px; --iddd-btn-pad-x: 28px; --iddd-btn-fs: 16px; --iddd-btn-min-h: 48px; }
	.iddd-btn-mobile-size-xl .iddd-btn { --iddd-btn-pad-y: 16px; --iddd-btn-pad-x: 36px; --iddd-btn-fs: 18px; --iddd-btn-min-h: 56px; }
	.iddd-btn-mobile-align-left .iddd-btn-wrap { justify-content: flex-start; }
	.iddd-btn-mobile-align-center .iddd-btn-wrap { justify-content: center; }
	.iddd-btn-mobile-align-right .iddd-btn-wrap { justify-content: flex-end; }
	.iddd-btn-mobile-align-justify .iddd-btn { width: 100%; }
}