@import './Theme.css';

.button {
	min-width: 153px;
	display: inline-block;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	color: var(--button-color);
	background-color: var(--button-background-color);
	border-color: #ccc;
	text-transform: uppercase;
	padding: 14px 0;
	letter-spacing: 1.1px;
	border: none;
}

.button:active {
	opacity: 1;
	background-color: var(--button-click);
}

.button:hover,
.signInButton:hover {
	opacity: 0.8;
}

.button:disabled {
	opacity: 1;
	cursor: auto;
	background-color: var(--ion-color-primary-tint);
}

.signInButton {
	position: relative;
	width: 100%;
	border-radius: 4px;
	margin-bottom: 10px;
	cursor: pointer;
	padding: 0;
	color: var(--deepSquidInk);
	font-size: 14px;
	box-sizing: content-box;
}

#googleSignInButton {
	background-color: #4285f4;
	font-family: Roboto;
	border: 1px solid #4285f4;
	color: var(--white);
}

#googleSignInButton > .signInButtonIcon {
	background-color: var(--white);
	border-radius: 4px 0 0 4px;
	height: 28px;
	width: 28px;
	padding: 12px;
}

#auth0SignInButton {
	background-color: #eb5424;
	font-family: Roboto;
	border: 1px solid #e14615;
	color: #fff;
}

#auth0SignInButton > .signInButtonIcon {
	border-radius: 4px 0 0 4px;
	height: 28px;
	width: 28px;
	padding: 12px;
	fill: #fff;
}

#facebookSignInButton {
	background-color: #4267b2;
	border-color: #4267b2;
	font-family: 'Helvetica Neue';
	color: var(--white);
}

#facebookSignInButton > .signInButtonIcon {
	height: 33px;
	width: 18px;
	padding: 10px 14px;
}

#amazonSignInButton {
	background-color: var(--amazonOrange);
	border: none;
	color: var(--white);
	font-family: 'Amazon Ember';
}

#amazonSignInButton > .signInButtonIcon {
	padding: 10px;
	height: 32px;
	width: 32px;
}

#oAuthSignInButton {
	background-color: var(--white);
	color: var(--deepSquidInk);
}

.signInButtonIcon {
	position: absolute;
	left: 0;
	box-sizing: content-box;
}

.signInButtonContent {
	text-align: center;
	display: block;
	padding: 18px 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	line-height: initial;
}