@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.stored-credit-card__card {
	position: relative;

	&.is-loading {
		opacity: 0.3;
	}

	.stored-credit-card__card-content {
		padding-inline: 24px;
		height: 220px;
		border-radius: 18px; /* stylelint-disable-line scales/radii */
		color: var(--color-text-inverted);
		background: url(calypso/assets/images/jetpack/credit-card-1.svg) no-repeat;
	}

	// Apply background images to every second card
	&:nth-child(3n-1) .stored-credit-card__card-content {
		background: url(calypso/assets/images/jetpack/credit-card-2.svg) no-repeat;
	}

	// Apply background images to every third card
	&:nth-child(3n) .stored-credit-card__card-content {
		background: url(calypso/assets/images/jetpack/credit-card-3.svg) no-repeat;
	}
}

.stored-credit-card__card-number {
	padding-block-start: 90px;
	@include heading-x-large;

	@include break-mobile {
		@include heading-2x-large;
		padding-block-start: 65px;
		text-wrap: nowrap;
	}
}

.stored-credit-card__card-info-heading {
	@include body-small;
	text-wrap: nowrap;
}

.stored-credit-card__card-info-value {
	@include heading-medium;

	@include break-mobile {
		@include heading-large;
	}
}

.stored-credit-card__card-details {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-block-start: 35px;
}

.stored-credit-card__payment-logo {
	position: absolute;
	inset-block-start: -20px;
	inset-inline-end: 0;

	svg {
		width: 100px;
		height: 100px;
	}

	// This is a hack to fix the position of the payment logos
	// because the SVGs are not all the same size
	// Ideal solution would be to create a  new component with all the SVGs the same size.
	&.stored-credit-card__payment-logo-visa {
		inset-inline-end: 17px;
	}

	&.stored-credit-card__payment-logo-discover,
	&.stored-credit-card__payment-logo-amex {
		inset-inline-end: 23px;
	}

	&.stored-credit-card__payment-logo-diners {
		inset-inline-end: -4px;
	}
}

// Change the color of the payment logos so they are visible on the dark background
.stored-credit-card__payment-logo-discover,
.stored-credit-card__payment-logo-amex {
	svg path:first-child {
		fill: var(--color-text-inverted);
	}
}

.stored-credit-card__card-footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-block-start: 16px;
}

.stored-credit-card__card-footer-title {
	@include heading-large;
}

.stored-credit-card__card-footer-subtitle {
	@include body-small;
}

button.button.stored-credit-card__card-footer-actions {
	padding: 16px;
}

.stored-credit-card__card-footer-actions-popover {
	.popover__menu-item.stored-credit-card__card-footer-actions-delete {
		color: var(--color-error);
	}
}
