@import "../../variables";

.account-add-card {
	width:100%;
	height:100%;
	padding:40px;
}

.input-with-subline .input-with-label{
	padding-bottom: 2px;
}

.input-with-subline {
	.input-with-label {
		position: relative;
	}
	&.visa, &.mastercard, &.discover, &.diners, &.amex, &.jcb {
		.input-with-label {
			&::before {
				background-color: mix(white, #424770, 40%);
				transition-delay: 0s;
				background-size: 50px 60px;
			}
			input {
				padding-left: 60px;
			}
		}
	}
	.input-with-label::before {
		position: absolute;
		top: 50%;
		left: 10px;
		content: '';
		width: 45px;
		height: 30px;
		background-position: center;
		border-radius: 5px;
		transition: width 0.3s ease 0.3s, height 0.3s ease 0.3s;
	}
	&.visa .input-with-label::before {
		background-image: url('../../../images/icon-card-visa.svg');
	}
	&.mastercard .input-with-label::before {
		background-image: url('../../../images/icon-card-mastercard.svg');

	}
	&.discover .input-with-label::before {
		background-image: url('../../../images/icon-card-discover.svg');
	}
	&.diners .input-with-label::before {
		background-image: url('../../../images/icon-card-dinersclub.svg');
	}
	&.amex .input-with-label::before {
		background-image: url('../../../images/icon-card-americanexpress.svg');
	}
	&.jcb .input-with-label::before {
		background-image: url('../../../images/icon-card-jcb.svg');
	}
}

.input-card-subline {
	margin-bottom: 15px;
	&-poweredbystripe {
		height: 24px;
		width: auto;
		float: right;
		margin-top: 2px;
	}
}
