.wcpay-deposits-overview {
	&__heading {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-bottom: 16px;

		&__title {
			font-weight: 600;
			font-size: 16px;
			line-height: 24px;
			color: $gray-900;
		}
	}
	.wcpay-inline-notice.components-notice {
		margin: 16px 0;
	}

	.components-card__body.wcpay-deposits-overview__schedule__container {
		padding-top: 24px;
		padding-bottom: 0;

		.is-loadable-placeholder {
			margin-bottom: 24px;
		}
	}

	// Override extraneous CardBody vertical padding -
	// we use multiple stacked CardBody components
	// so table CardDivider is full width.
	.components-card__body.wcpay-deposits-overview__table__container,
	.components-card__body.wcpay-deposits-overview__notices__container {
		padding-top: 0;

		// If the CardFooter is rendered, remove the bottom padding
		&:not( :last-child ) {
			padding-bottom: 0;
		}
	}

	// Override display:block on the first FlexItem with the date and icon
	.wcpay-deposits-overview__table__cell:first-child {
		display: flex;
	}

	// Override notice colors for transit days notice
	.wcpay-inline-notice.components-notice.wcpay-deposit-transit-days-notice {
		background-color: $gray-0;

		.wcpay-inline-notice__icon svg {
			fill: $gray-900;
		}
	}

	&__table {
		&__row {
			&__header {
				font-weight: 600;

				div {
					padding: 8px 0;
				}
			}
		}
		&__cell {
			font-size: 13px;
			align-items: center;
			padding: 16px 0;

			svg {
				fill: $gray-900;
				position: relative;
				left: 2.5px;
				margin-right: 24px;
			}

			&:first-child {
				width: 35%;
			}

			&:last-child {
				margin-left: auto;
			}
		}
	}

	&__footer.components-card__footer {
		padding: 24px;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;

		@media screen and ( max-width: 550px ) {
			flex-direction: column;
			justify-content: center;
			padding: 16px 24px;

			> * {
				margin: 0;
			}
		}
	}
}

@media screen and ( max-width: 605px ) {
	.wcpay-deposits-overview__table__cell:first-child {
		width: 45%;
	}
}
