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

.CopyButton {
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 5px;
	font-weight: 700;
	background: transparent;
	@include defaultFontSettings;
	@include tracking(40);
	@include setupThemeVars(
		'--Button_Background',
		'--Button_Background_Hover',
		'--Button_Text_Color',
		'--Button_Text_Color_Hover',
		'--Button_Padding',
		'--Button_Border',
		'--Button_Border_Hover',
	);

	color: var(--Button_Text_Color);
	background: var(--Button_Background);
	padding: var(--Button_Padding);
	border: var(--Button_Border);
	border-radius: 5px;

	&:hover {
		color: var(--Button_Text_Color_Hover);
		background: var(--Button_Background_Hover);
		border: var(--Button_Border_Hover);
	}

	&:active {
		transform: scale(.98);
	}

	span, svg, g, path, circle {
		cursor: pointer;
	}

	svg path {
		fill: var(--Button_Text_Color);
	}

	&:hover svg path {
		fill: var(--Button_Text_Color_Hover);
	}
}

.CopyButton__Color_Gray {
	@include setThemeVar('--Button_Background', $gray5, none);
	@include setThemeVar('--Button_Background_Hover', $gray15, none);
	@include setThemeVar('--Button_Text_Color', $gray-dark50, $gray15);
	@include setThemeVar('--Button_Text_Color_Hover', $gray-dark50, $white);
	@include setThemeVar('--Button_Border', none, 1px solid $gray15);
	@include setThemeVar('--Button_Border_Hover', none, 1px solid $white);
}

.CopyButton__Color_Gray_Padding_Small {
	@include setThemeVar('--Button_Padding', 5px 10px, 4px 10px);
	@include setThemeVar('--Button_Border_Width', none, 1px);
}
.CopyButton__Color_Gray_Padding_Medium {
	@include setThemeVar('--Button_Padding', 10px);
	@include setThemeVar('--Button_Border_Width', none, 1.5px);
}

.CopyButton__Color_Green {
	@include setThemeVar('--Button_Background', $green-dark, $green);
	@include setThemeVar('--Button_Background_Hover', $green, $green-dark50);
	@include setThemeVar('--Button_Text_Color', $white);
	@include setThemeVar('--Button_Text_Color_Hover', $white);
}

.CopyButton__Color_Green_Padding_Small {
	@include setThemeVar('--Button_Padding', 5px 10px, 4px 10px);
}

.CopyButton__Color_Green_Padding_Medium {
	@include setThemeVar('--Button_Padding', 10px);
}

.CopyButton__Color_None {
	@include setThemeVar('--Button_Background', none);
	@include setThemeVar('--Button_Background_Hover', none);
	@include setThemeVar('--Button_Text_Color', $green-dark, $green);
	@include setThemeVar('--Button_Text_Color_Hover', $green, $green-dark50);
}

.CopyButton__Color_None_Padding_Small {
	@include setThemeVar('--Button_Padding', 0px);
}

.CopyButton__Color_None_Padding_Medium {
	@include setThemeVar('--Button_Padding', 0px);
}

.CopyButton__Text_Gray {
	@include setThemeVar('--Button_Text_Color', $gray-dark50, $gray15);
	@include setThemeVar('--Button_Text_Color_Hover', $gray-dark50, $gray15);
}

.CopyButton__Text {
	font-size: 12px;
	letter-spacing: 0.24px;
}

.CopyButton__Text_Margin {
	margin-left: 5px;
}

.CopyButton__Wrapper {
	display: flex;
	align-items: center;
}

@keyframes popin {
	0% { transform: scale(0); opacity: 0; }
	40% { transform: scale(1.07); opacity: 1; }
	70% { transform: scale(.97); }
	100% { transform: scale(1); }
}

.popin {
	animation: popin .5s;
}