vwc-button.scss

@forward './vwc-button-coupling';
@use './vwc-button-variables' as button-variables;
@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
@use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
@use '@vonage/vvd-foundation/scss/mixins/connotation/config' with (
	$connotations-set: primary cta success alert info announcement,
	$shades: diverse,
	$default: primary,
);
@use '@vonage/vvd-foundation/scss/mixins/connotation' as connotation;
@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with(
	$variable-name: --vvd-button-shape
);
@use '@vonage/vvd-foundation/scss/mixins/layout/config' as layout-config with (
	$layout-set: filled outlined ghost,
	$default: ghost,
);
@use '@vonage/vvd-foundation/scss/mixins/layout' as layout;


@mixin size($type, $unit) {
	:host([#{$type}]) & {
		--button-block-size: #{$unit * 8px};

		vwc-icon {
			#{icon-variables.$icon-size-variable-name}: var(#{button-variables.$button-icon-size-variable-name}, #{$unit * 4px});
		}

		@content;
	}
}


.mdc-button {
	--mdc-button-disabled-ink-color: var(#{vvd-formfield.$formfield-disabled-ink});
	--mdc-button-disabled-fill-color: var(#{scheme-variables.$vvd-color-neutral-30});
	--mdc-button-disabled-outline-color: var(#{vvd-formfield.$formfield-disabled-ink});
	--mdc-button-outline-color: var(#{layout.$vvd-layout-color-outline}, var(--mdc-theme-primary));
	--mdc-button-horizontal-padding: 16px;
	--button-block-size: 40px;
	$gutter: 8px;

	@include vvd-formfield.coupling;
	@include connotation.connotation;
	@include layout.layout;

	height: var(--vvd-button-block-size, var(--button-block-size));
	border-radius: var(#{button-variables.$vvd-button-shape});
	// ! this was supposed to be set by MDC
	font-stretch: var(--mdc-typography-button-font-stretch);
	letter-spacing: normal;

	&:not(.mdc-button--dense) {
		vwc-icon {
			#{icon-variables.$icon-size-variable-name}: var(#{button-variables.$button-icon-size-variable-name}, 20px);
		}
	}

	.leading-icon,
	.trailing-icon {
		// TODO remove next line when VIV-704 resolved
		#{connotation.$vvd-color-connotation}: initial;
		display: flex;
	}

	> .trailing-icon {
		vwc-icon {
			margin-inline-start: $gutter;
		}
	}

	> .leading-icon {
		vwc-icon {
			margin-inline-end: $gutter;
		}
	}

	/* stylelint-disable-next-line order/order -- variants */
	@include size(dense, 4);
	@include size(enlarged, 6) {
		$gutter: 10px;

		> .trailing-icon {
			vwc-icon {
				margin-inline-start: $gutter;
			}
		}

		> .leading-icon {
			vwc-icon {
				margin-inline-end: $gutter;
			}
		}
	}

	:host([raised]) &,
	:host([unelevated]) & {
		--mdc-ripple-color: var(#{button-variables.$vvd-button-on-color}, var(#{layout.$vvd-layout-color-text}));
	}

	:host([unelevated]) & {
		--mdc-theme-primary: var(#{button-variables.$vvd-button-color}, var(#{layout.$vvd-layout-color-fill}));
		--mdc-theme-on-primary: var(#{button-variables.$vvd-button-on-color}, var(#{layout.$vvd-layout-color-text}));
	}

	&:not(.layout-filled) {
		--mdc-theme-primary: var(#{button-variables.$vvd-button-color}, var(#{layout.$vvd-layout-color-text}));
		--mdc-theme-on-primary: var(#{button-variables.$vvd-button-on-color}, var(#{layout.$vvd-layout-color-fill}));
	}

	:host([dense]) & {
		--mdc-button-horizontal-padding: 12px;
	}

	:host([enlarged]) & {
		--mdc-button-horizontal-padding: 20px;
	}
}

@include shape-mixins.shape(
	$shapes: (
		rounded: 6px,
		pill: 24px,
	)
);