@import "../utils/directional";

$color_1: #757575;
$color_2: #495057;
$color_3: #e25950;
$color_4: #4285f4;
$color_5: #1b9404;
$background-color_1: #fff;
$border-color_1: #1b9404;
$border-color_2: #4285f4;
$border-color_3: #e25950;

.sswps-bootstrap-form {
	background: transparent;
	margin-top: 10px;
	.StripeElement {
		background-color: $background-color_1;
		border-radius: 4px;
		box-sizing: border-box;
		height: 40px;
		padding: 10px 12px;
		-webkit-transition: box-shadow .15s ease;
		transition: box-shadow .15s ease;
	}
	.row {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 -15px;
	}
	.mb-2 {
		margin-bottom: .5rem !important;
	}
	.my-2 {
		margin-bottom: .5rem !important;
	}
	.mb-3 {
		margin-bottom: 18px !important;
	}
	.my-3 {
		margin-bottom: 18px !important;
	}
	.col-md-3 {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		width: 100%;
	}
	.col-md-4 {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		width: 100%;
	}
	.col-md-6 {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		width: 100%;
	}
	.col-md-9 {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		width: 100%;
	}
	.col-md-12 {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		width: 100%;
	}
	.md-form+label {
		color: $color_1;
		cursor: text;
		#{$left}: 15px;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		top: .65rem;
		-webkit-transition: .3s ease-out;
		-o-transition: .3s ease-out;
		transition: .3s ease-out;
	}
	.md-form.md-outline.StripeElement+label {
		color: $color_2;
		cursor: text;
		font-size: 16px;
		font-weight: 300;
		margin: 0;
		padding-#{$left}: 12px;
		pointer-events: none;
		position: absolute !important;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transition-property: color,transform;
		-webkit-transition: .3s ease-out;
		-o-transition: .3s ease-out;
		transition: .3s ease-out;
	}
	.md-form.md-outline.focused+label {
		background: #fff !important;
		font-size: 12px;
		font-weight: 500;
		#{$left}: 20px;
		padding-left: 5px;
		padding-right: 5px;
		-webkit-transform: translateY(-35px);
		-ms-transform: translateY(-35px);
		transform: translateY(-35px);
		color: $color_4;
	}
	.md-form.md-outline.invalid+label {
		background: #fff !important;
		font-size: 12px;
		font-weight: 500;
		#{$left}: 20px;
		padding-left: 5px;
		padding-right: 5px;
		-webkit-transform: translateY(-35px);
		-ms-transform: translateY(-35px);
		transform: translateY(-35px);
		color: $color_3 !important;
	}
	.md-form.md-outline.StripeElement--complete+label {
		background: #fff !important;
		font-size: 12px;
		font-weight: 500;
		#{$left}: 20px;
		padding-left: 5px;
		padding-right: 5px;
		-webkit-transform: translateY(-35px);
		-ms-transform: translateY(-35px);
		transform: translateY(-35px);
		color: $color_5;
	}
	.md-form.md-outline {
		height: auto;
		position: relative;
		width: 100%;
	}
	.md-form.md-outline.StripeElement--complete {
		border-color: $border-color_1;
		box-shadow: inset 0 0 0 .5px #1b9404;
		-webkit-box-shadow: inset 0 0 0 .5px #1b9404;
	}
	.stripe-input {
		background-color: $background-color_1 !important;
		border: 1px solid #dadce0;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height: 40px;
		outline: 0;
		-webkit-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
	}
	.stripe-input.focused {
		border-color: $border-color_2;
		-webkit-box-shadow: inset 0 0 0 .5px #4285f4;
		box-shadow: inset 0 0 0 .5px #4285f4;
	}
	.stripe-input.invalid {
		border-color: $border-color_2;
		-webkit-box-shadow: inset 0 0 0 .5px #4285f4;
		box-shadow: inset 0 0 0 .5px #4285f4;
		border-color: $border-color_3;
		box-shadow: inset 0 0 0 .5px #e25950;
	}
	[class^=col-md-] {
		box-sizing: border-box;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.sswps-card {
		bottom: 0;
		right: 30px;
		top: 50%;
		transform: translateY(-50%);
	}
}
.small-form {
	.sswps-bootstrap-form {
		[class^=col-md-] {
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}
	}
}
.sswps-blocks-payment-method__desc.sswps_cc {
	p {
		margin-bottom: 1em;
	}
}
@media (min-width:475px) {
	.sswps-bootstrap-form {
		.col-md-3 {
			-ms-flex: 0 0 25%;
			flex: 0 0 25%;
			max-width: 25%;
		}
		.col-md-4 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 33.33%;
			flex: 0 0 33.33%;
			max-width: 33.33%;
		}
		.col-md-6 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;
		}
		.col-md-9 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 75%;
			flex: 0 0 75%;
			max-width: 75%;
		}
		.col-md-12 {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}
	}
}