@mixin neutral {
	--components-box-background: var(--palettes-neutral-25);
}

@mixin toggle {
	margin-block-start: var(--components-box-toggle-arrow-size);

	&::before {
		inset-inline-start: var(--components-box-toggle-arrow-left);
		border-color: transparent;
		border-style: solid;
		border-width: var(--components-box-toggle-arrow-size);
		border-block-end-color: var(--components-box-background, var(--pr-t-elevation-surface-raised));
		border-block-start: 0;
		block-size: 0;
		inset-block-end: 100%;
		inline-size: 0;
		position: absolute;
		content: '';
	}
}

@mixin arrow {
	--components-box-arrow-background: var(--pr-t-elevation-surface-raised);
	--components-box-arrow-left: 0;
	--components-box-arrow-bottom: 0;

	background-color: var(--components-box-arrow-background);
	margin-block: 0;
	margin-inline: var(--pr-t-spacings-50);
	inline-size: 12px;
	block-size: 8px;
	clip-path: path('M4.66415 0.494638C5.43093 -0.164881 6.56907 -0.164879 7.33586 0.49464L12 8H0L4.66415 0.494638Z');
	position: absolute;
	inset-block-end: var(--components-box-arrow-bottom);
	inset-inline-start: var(--components-box-arrow-left);

	// .mod-grey is deprecated
	&.mod-neutral,
	&.mod-grey {
		--components-box-arrow-background: var(--palettes-neutral-25);
	}
}

@mixin withArrow {
	--components-box-padding: var(--pr-t-spacings-200);
	--components-box-borderRadius: var(--pr-t-border-radius-small) var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure);

	.box-arrow {
		--components-box-arrow-bottom: 100%;
		--components-box-arrow-left: var(--pr-t-spacings-75);
	}
}

@mixin arrowS {
	--components-box-arrow-left: -2px;
	--components-box-arrow-bottom: -2px;
}

@mixin arrowSwitch {
	--components-box-arrow-left: 8px;
}

@mixin arrowSwitchS {
	--components-box-arrow-left: 4px;
	--components-box-arrow-bottom: -2px;
}