.mega-button.theme-light,.theme-light .mega-button,html .mega-button.theme-light-forced,html .theme-light-forced .mega-button{

	--red:var(--surface-error);
	--red-hover:var(--surface-error-hover);
	--red-active:var(--surface-error-active);
	--text-red:var(--text-color-white-high);
	--red-border:rgba(1, 1, 1, 0.05);

	--green:var(--button-fill-positive);
	--green-hover:var(--button-fill-positive-hover);
	--green-active:var(--button-fill-positive-active);
	--text-green:var(--text-color-white-high);
	--green-border:rgba(1, 1, 1, 0.05);

	--blue:var(--button-fill-blue);
	--blue-hover:var(--button-fill-blue-hover);
	--blue-active:var(--button-fill-blue-active);
	--text-blue:var(--text-color-white-high);
	--blue-border:rgba(1, 1, 1, 0.05);

	--neutral:linear-gradient(#fff, #f2f2f2);
	--neutral-hover:linear-gradient(#f2f2f2, #ededed);
	--neutral-active:#fff;
	--text-neutral:#333;
	--neutral-border:rgba(0, 0, 0, 0.1);

	--action:transparent;
	--action-hover:rgba(0, 0, 0, 0.05);
	--action-active:transparent;
	--text-action:var(--text-color-black-high)
}
.mega-button.theme-dark,.theme-dark .mega-button,html .mega-button.theme-dark-forced,html .theme-dark-forced .mega-button{

	--red:var(--surface-error);
	--red-hover:var(--surface-error-hover);
	--red-active:var(--surface-error-active);
	--text-red:var(--text-color-white-high);
	--red-border:hsla(0, 0%, 100%, 0.2);

	--green:var(--button-fill-positive);
	--green-hover:var(--button-fill-positive-hover);
	--green-active:var(--button-fill-positive-active);
	--text-green:var(--text-color-white-high);
	--green-border:hsla(0, 0%, 100%, 0.2);

	--blue:var(--button-fill-blue);
	--blue-hover:var(--button-fill-blue-hover);
	--blue-active:var(--button-fill-blue-active);
	--text-blue:var(--text-color-white-high);
	--blue-border:hsla(0, 0%, 100%, 0.2);

	--neutral:linear-gradient(180deg, #9f9f9f, #666);
	--neutral-hover:linear-gradient(180deg, #afafaf, #787878);
	--neutral-active:linear-gradient(180deg, #8c8c8c, #535353);
	--text-neutral:var(--text-color-white-high);
	--neutral-border:hsla(0, 0%, 100%, 0.1);

	--action:transparent;
	--action-hover:hsla(0, 0%, 100%, 0.1);
	--action-active:transparent;
	--text-action:var(--text-color-white-high)
}
.mega-button{
	--horizontal-padding:8px;
	--outer-padding:6px;
	--border-width:2px;
	--height:36px;
	--mask-color:var(--icon-active)
}
.mega-button.small{
	--horizontal-padding:4px;
	--outer-padding:4px;
	--height:24px
}
.mega-button.large{
	--horizontal-padding:16px;
	--outer-padding:8px;
	--height:48px
}
.mega-button.round{
	--outer-padding:6px
}
.mega-button.small.round{
	--outer-padding:var(--border-width)
}
.mega-button.large.round{
	--outer-padding:8px
}
.mega-button.icon{
	--horizontal-padding:0;
	--outer-padding:0;
	--height:24px
}
.mega-button.small.icon{
	--horizontal-padding:0;
	--outer-padding:0;
	--height:16px
}
.mega-button.large.icon{
	--horizontal-padding:0;
	--outer-padding:0;
	--height:32px
}
.mega-button.branded-red,.mega-button.negative{
	--mask-color:var(--text-red)
}
.mega-button.branded-green,.mega-button.positive{
	--mask-color:var(--text-green)
}
.mega-button.branded-blue{
	--mask-color:var(--text-blue)
}
.mega-button.round{
	--outer-padding:6px
}
.mega-button.round.small{
	--outer-padding:2px
}
