@import '../../../../styles/_partials/index';
@import '../../../../common/styles/themeUtils';

$disabled-background-light: $gray25;
$disabled-background-dark: $gray75;
$disabled-text-light: $gray25;
$disabled-text-light-fill: $gray75;
$disabled-text-dark: $gray75;
$disabled-text-dark-fill: $gray;

.ButtonBase {
	// base styles
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	vertical-align: middle;
	position: relative;
	background: transparent;
	transition: transform 0.1s ease 0s, background .1s ease 0s, color .1s ease 0s;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 500px;
	@include defaultFontSettings;
	// setup a light and dark css variable for each css prop name so we can effortlessly toggle between them based on the current theme
	@include setupThemeVars(
		'--Button_Background',
		'--Button_BorderColor',
		'--Button_TextColor',
		'--Button_TextColor_Hover',
		'--Button_SvgPathFillColor',
		'--Button_IfFill__Background',
		'--Button_IfFill__Background_Hover',
		'--Button_IfFill__Background_Active',
		'--Button_IfFill__TextColor',
		'--Button_IfFill__TextColor_Hover',
		'--Button_IfFill__TextColor_Active',
		'--Button_IfText__TextColor',
		'--Button_IfText__TextColor_Hover',
		'--Button_IfText__TextColor_Active',
		'--Button__FontWeight',
		'--Button__TextTransform',
		'--Button__TextDecoration',
		'--Button__TextDecoration_Hover',
	);

	// css variable-based styles
	color: var(--Button_TextColor);
	background: var(--Button_Background);
	font-weight: var(--Button__FontWeight);
	text-transform: var(--Button__TextTransform);
	text-decoration: var(--Button__TextDecoration);
	border: none;

	// use explicit hover color rather than default color to ensure tags like 'a' don't inherit their global style
	&:hover {
		color: var(--Button_TextColor_Hover);
		text-decoration: var(--Button__TextDecoration_Hover);
	}

	// conditionally draw inner border by using the :after selector
	&:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 2px solid var(--Button_BorderColor);
		border-radius: 500px;
		transition: border 0.1s ease 0s;
	}

	&:active, &._active {
		&:not([aria-disabled="true"]) {
			transform: scale(.98);
		}
	}

	&[aria-disabled="true"] {
		pointer-events: none;
	}

	svg {
		width: auto;
		height: auto;
		flex-shrink: 0;
		margin: 0;

		path, rect, circle {
			transition: fill .1s ease 0s, stroke .1s ease 0s;
		}

		&.ButtonBase_SVG_Left {
			margin: 0 8px 0 0;
		}

		&.ButtonBase_SVG_Right {
			margin: 0 0 0 8px;
		}
	}

	&.ButtonBase__SVG_Fill svg {
		path, rect, circle{
			stroke: none;
			fill: var(--Button_SvgPathFillColor);
		}
	}

	&.ButtonBase__SVG_Stroke svg {
		path, rect, circle {
			fill: none;
			stroke: var(--Button_SvgPathFillColor);
		}
	}

	&.ButtonBase__SVG_Background svg {
		background: var(--Button_SvgPathFillColor);

		path, rect, circle {
			fill: none;
			stroke: none;
		}
	}
}

.ButtonBase__Form_Fill {
	@include setThemeVar('--Button_Background', var(--Button_IfFill__Background));
	@include setThemeVar('--Button_TextColor', var(--Button_IfFill__TextColor));
	@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfFill__TextColor));

	&:hover, &:focus-visible {
		@include setThemeVar('--Button_Background', var(--Button_IfFill__Background_Hover));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_TextColor', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfFill__TextColor_Hover));
	}

	&:active, &._active {
		@include setThemeVar('--Button_Background', var(--Button_IfFill__Background_Active));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfFill__TextColor_Active));
		@include setThemeVar('--Button_TextColor', var(--Button_IfFill__TextColor_Active));
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfFill__TextColor_Active));
	}

	&[aria-disabled="true"] {
		@include setThemeVar('--Button_Background', $disabled-background-light, $disabled-background-dark);
		@include setThemeVar('--Button_TextColor', $disabled-text-light-fill, $disabled-text-dark-fill);
		@include setThemeVar('--Button_SvgPathFillColor', $disabled-text-light-fill, $disabled-text-dark-fill);
	}
}

.ButtonBase__Form_Reversed {
	@include setThemeVar('--Button_Background', $white);
	@include setThemeVar('--Button_TextColor', var(--Button_IfText__TextColor_Light));
	@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfText__TextColor));

	&:hover, &:focus-visible {
		@include setThemeVar('--Button_Background', var(--Button_IfText__TextColor_Hover_Light));
		@include setThemeVar('--Button_TextColor_Hover', $white);
		@include setThemeVar('--Button_TextColor', $white);
		@include setThemeVar('--Button_SvgPathFillColor', $white);
	}

	&:active, &._active {
		@include setThemeVar('--Button_Background', var(--Button_IfText__TextColor_Active_Light));
		@include setThemeVar('--Button_TextColor_Hover', var($white));
		@include setThemeVar('--Button_TextColor', var($white));
		@include setThemeVar('--Button_SvgPathFillColor', var($white));
	}

	&[aria-disabled="true"] {
		@include setThemeVar('--Button_Background', $disabled-background-light, $disabled-background-dark);
		@include setThemeVar('--Button_TextColor', $disabled-text-light-fill, $disabled-text-dark-fill);
		@include setThemeVar('--Button_SvgPathFillColor', $disabled-text-light-fill, $disabled-text-dark-fill);
	}
}

.ButtonBase__Form_Outline {
	@include setThemeVar('--Button_BorderColor', var(--Button_IfText__TextColor));
	@include setThemeVar('--Button_TextColor', var(--Button_IfText__TextColor));
	@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfText__TextColor));

	&:hover, &:focus-visible {
		@include setThemeVar('--Button_TextColor', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_Background', var(--Button_IfFill__Background_Hover));
		@include setThemeVar('--Button_BorderColor', transparent);
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfFill__TextColor_Hover));
	}

	&:active, &._active {
		@include setThemeVar('--Button_TextColor', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfFill__TextColor_Hover));
		@include setThemeVar('--Button_Background', var(--Button_IfFill__Background_Active));
		@include setThemeVar('--Button_BorderColor', transparent);
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfFill__TextColor_Hover));
	}

	&[aria-disabled="true"] {
		@include setThemeVar('--Button_Background', transparent);
		@include setThemeVar('--Button_SvgPathFillColor', $disabled-text-light, $disabled-text-dark);
		@include setThemeVar('--Button_BorderColor', $disabled-text-light, $disabled-text-dark);
		@include setThemeVar('--Button_TextColor', $disabled-text-light, $disabled-text-dark);
	}
}

.ButtonBase__Form_Text {
	vertical-align: baseline;
	border-radius: 4px;

	@include setThemeVar('--Button_TextColor', var(--Button_IfText__TextColor));
	@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfText__TextColor));

	&:hover, &:focus-visible {
		@include setThemeVar('--Button_TextColor', var(--Button_IfText__TextColor_Hover));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfText__TextColor_Hover));
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfText__TextColor_Hover));
	}

	&:active, &._active {
		@include setThemeVar('--Button_SvgPathFillColor', var(--Button_IfText__TextColor_Active));
		@include setThemeVar('--Button_TextColor_Hover', var(--Button_IfText__TextColor_Active));
		@include setThemeVar('--Button_TextColor', var(--Button_IfText__TextColor_Active));
	}

	&[aria-disabled="true"] {
		@include setThemeVar('--Button_SvgPathFillColor', $disabled-text-light, $disabled-text-dark);
		@include setThemeVar('--Button_TextColor', $disabled-text-light, $disabled-text-dark);
	}
}

.ButtonBase__Color_Gray {
	@include setThemeVar('--Button_IfFill__Background', $gray, $white);
	@include setThemeVar('--Button_IfFill__TextColor', $white, $gray-dark);
	@include setThemeVar('--Button_IfFill__Background_Hover', $gray-dark50, $gray15);
	@include setThemeVar('--Button_IfFill__TextColor_Hover', $white, $gray-dark);
	@include setThemeVar('--Button_IfFill__Background_Active', $gray-dark, $gray25);
	@include setThemeVar('--Button_IfFill__TextColor_Active', $white, $gray-dark);
	@include setThemeVar('--Button_IfText__TextColor', $gray75, $gray75);
	@include setThemeVar('--Button_IfText__TextColor_Hover', $gray-dark50, $gray15);
	@include setThemeVar('--Button_IfText__TextColor_Active', $gray-dark, $gray25);
}

.ButtonBase__Color_Green {
	@include setThemeVar('--Button_IfOutline__TextColor', $green-dark, $green);
	@include setThemeVar('--Button_IfFill__Background', $green-dark, $white);
	@include setThemeVar('--Button_IfFill__TextColor', $white, $gray-dark);
	@include setThemeVar('--Button_IfFill__Background_Hover', $green);
	@include setThemeVar('--Button_IfFill__TextColor_Hover', $white);
	@include setThemeVar('--Button_IfFill__Background_Active', $green-dark50);
	@include setThemeVar('--Button_IfFill__TextColor_Active', $white);
	@include setThemeVar('--Button_IfText__TextColor', $green-dark, $green);
	@include setThemeVar('--Button_IfText__TextColor_Hover', $green, $green-dark50);
	@include setThemeVar('--Button_IfText__TextColor_Active', $green-dark50, $green-dark);
}

.ButtonBase__Color_Orange {
	@include setThemeVar('--Button_IfFill__Background', $orange-dark50, $orange);
	@include setThemeVar('--Button_IfFill__TextColor', $white);
	@include setThemeVar('--Button_IfFill__Background_Hover', $orange, $orange-dark50);
	@include setThemeVar('--Button_IfFill__TextColor_Hover', $white);
	@include setThemeVar('--Button_IfFill__Background_Active', $orange-dark50, $orange-dark);
	@include setThemeVar('--Button_IfFill__TextColor_Active', $white);
	@include setThemeVar('--Button_IfText__TextColor', $orange-dark50, $orange);
	@include setThemeVar('--Button_IfText__TextColor_Hover', $orange, $orange-dark50);
	@include setThemeVar('--Button_IfText__TextColor_Active', $orange-dark50, $orange-dark);
}

.ButtonBase__Color_Red {
	@include setThemeVar('--Button_IfFill__Background', $red-dark50, $red);
	@include setThemeVar('--Button_IfFill__TextColor', $white);
	@include setThemeVar('--Button_IfFill__Background_Hover', $red, $red-dark50);
	@include setThemeVar('--Button_IfFill__TextColor_Hover', $white);
	@include setThemeVar('--Button_IfFill__Background_Active', $red-dark50, $red-dark);
	@include setThemeVar('--Button_IfFill__TextColor_Active', $white);
	@include setThemeVar('--Button_IfText__TextColor', $red-dark50, $red);
	@include setThemeVar('--Button_IfText__TextColor_Hover', $red, $red-dark50);
	@include setThemeVar('--Button_IfText__TextColor_Active', $red-dark50, $red-dark);
}

.ButtonBase__FontWeight_Heavy {
	@include setThemeVar('--Button__FontWeight', 700);
}

.ButtonBase__FontWeight_Medium {
	@include setThemeVar('--Button__FontWeight', 500);
}

.ButtonBase__FontWeight_Light {
	@include setThemeVar('--Button__FontWeight', 300);
}

.ButtonBase__TextTransform_Upper {
	@include setThemeVar('--Button__TextTransform', uppercase);
}

.ButtonBase__TextTransform_None {
	@include setThemeVar('--Button__TextTransform', none);
}

.ButtonBase__TextDecoration_None {
	@include setThemeVar('--Button__TextDecoration', none);
}

.ButtonBase__TextDecoration_Underline {
	@include setThemeVar('--Button__TextDecoration', underline);
}

.ButtonBase__TextDecoration_Underline_Hover {
	@include setThemeVar('--Button__TextDecoration_Hover', underline);
}

.ButtonBase__LetterSpacing_Normal {
	letter-spacing: normal;
}

.ButtonBase__LetterSpacing_Tracked {
	@include tracking(5);
}

.ButtonBase__LetterSpacing_Extra {
	@include tracking(40);
}

.ButtonBase__Display_Inline {
	display: inline-flex;
}

.ButtonBase__FontSize_XSmall {
	font-size: $font-size-content-xs;
}

.ButtonBase__FontSize_Small {
	font-size: $font-size-content-s;
}

.ButtonBase__FontSize_Medium {
	font-size: $font-size-content-m;
}

.ButtonBase__FontSize_Large {
	font-size: $font-size-header-s;
}

.ButtonBase__FontSize_XLarge {
	font-size: $font-size-header-m;
}

.ButtonBase__FontSize_XXLarge {
	font-size: $font-size-header-xl;
}

.ButtonBase__Padding_None {
	padding: 0;
}

.ButtonBase__Padding_Small {
	padding: 5px 10px;
}

.ButtonBase__Padding_Medium {
	padding: 10px 20px;
}

.ButtonBase__Padding_Large {
	padding: 20px 30px;
}