$eps-add-new-button-background-color: theme-colors(info);
$eps-add-new-button-icon-color: theme-colors(light);
$eps-add-new-button-size: spacing(24);
$eps-add-new-button-size-sm: spacing(16);
$eps-add-new-button-icon-size-ratio: 0.75;
$eps-add-new-button-font-weight: $eps-font-weight-medium;

.#{$eps-prefix}add-new-button {
	display: inline-flex;
	--eps-add-new-button-size: #{$eps-add-new-button-size};
	line-height: var(--eps-add-new-button-size);
	cursor: pointer;

	.eps-icon {
		background-color: $eps-add-new-button-background-color;
		color: $eps-add-new-button-icon-color;
		width: var(--eps-add-new-button-size);
		height: var(--eps-add-new-button-size);
		border-radius: 100%;
		font-size: calc(var(--eps-add-new-button-size) * #{$eps-add-new-button-icon-size-ratio});
		text-align: center;
		line-height: var(--eps-add-new-button-size);
	}

	span:not(.sr-only) {
		margin-inline-start: spacing(10);
		font-weight: $eps-add-new-button-font-weight;
	}

	&--sm {
		--eps-add-new-button-size: #{$eps-add-new-button-size-sm};
	}
}
