@use '@lucca-front/scss/src/commons/utils/color';

@mixin vars {
	/** notch */
	--component-notchbox-notch-radius: var(--pr-t-border-radius-structure);
	--component-notchbox-notch-radius-inner: 18px;
	--component-notchbox-notch-width: 56px;
	--component-notchbox-notch-height: 24px;
	--component-notchbox-notch-position: 50%;
	--component-notchbox-notch-percent: 0.5;

	/** box */
	--component-notchbox-box-radius: var(--pr-t-border-radius-structure);
	--component-notchbox-box-padding: var(--pr-t-spacings-200);
	--component-notchbox-box-background-color: var(--pr-t-elevation-surface-raised);
	--component-notchbox-box-shadow: 0 1px 2px #{color.transparentize(var(--palettes-neutral-400), 0.6)};

	/** badge */
	--component-notchbox-badge-offset: 17px;
	--component-notchbox-badge-height: 48px;
	--component-notchbox-badge-width: 48px;
	--component-notchbox-badge-radius: 14px;
	--component-notchbox-badge-background-color: var(--palettes-700, var(--palettes-product-700));
}