// Shows a border with the current color and a custom opacity. That can't be achieved
// with normal border because `currentColor` doesn't allow tweaking the opacity, and
// setting the opacity of the entire element would change the children's opacity too.
@mixin with-translucent-border( $border-width: 1px, $opacity: 0.3 ) {
	position: relative;

	&::after {
		border-style: solid;
		border-width: $border-width;
		bottom: 0;
		content: '';
		display: block;
		left: 0;
		opacity: $opacity;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.wcs-recurring-totals-panel {
	@include with-translucent-border( 1px 0 );
	padding: 1em 0 0;

	+ .wcs-recurring-totals-panel::after {
		border-top-width: 0;
	}

	.wc-block-components-panel .wc-block-components-totals-item {
		padding-left: 0;
		padding-right: 0;
	}

	.wc-block-components-totals-item__label::first-letter {
		text-transform: capitalize;
	}
	.wcs-recurring-totals-panel__title .wc-block-components-totals-item__label {
		font-weight: 700;
	}
}

.wcs-recurring-totals-panel__title {
	margin: 0;
}

.wcs-recurring-totals-panel__details {
	.wc-block-components-panel__button,
	.wc-block-components-panel__button:hover,
	.wc-block-components-panel__button:focus {
		font-size: 0.875em;
	}

	.wc-block-components-panel__content > .wc-block-components-totals-item {
		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.wcs-recurring-totals-panel__details-total
		.wc-block-components-totals-item__label {
		font-weight: 700;
	}
}

.wcs-recurring-totals__subscription-length {
	float: right;
}