.kkart-block-components-order-summary {
	.kkart-blocks-components-panel__button {
		margin-top: 0;
		padding-top: 0;
	}
}

.kkart-block-components-order-summary__content {
	display: table;
	width: 100%;
}

.kkart-block-components-order-summary-item {
	@include with-translucent-border(0 0 1px);
	display: table-row;
	padding-bottom: 1px;
	width: 100%;

	&:last-child {
		> div {
			padding-bottom: 0;
		}

		&::after {
			display: none;
		}
	}
}

.kkart-block-components-order-summary-item__image,
.kkart-block-components-order-summary-item__description {
	display: table-cell;
	vertical-align: top;
}

.kkart-block-components-order-summary-item__image {
	width: #{$gap-large * 2};
	padding-top: $gap;
	padding-bottom: $gap;
	position: relative;

	> img {
		width: #{$gap-large * 2};
		max-width: #{$gap-large * 2};
	}
}

.kkart-block-components-order-summary-item__quantity {
	@include font-size(smaller);
	align-items: center;
	background: #fff;
	border: 2px solid;
	border-radius: 1em;
	box-shadow: 0 0 0 2px #fff;
	color: #000;
	display: flex;
	line-height: 1;
	min-height: 20px;
	padding: 0 0.4em;
	position: absolute;
	justify-content: center;
	min-width: 20px;
	right: 0;
	top: $gap;
	transform: translate(50%, -50%);
	white-space: nowrap;
	z-index: 1;
}

.kkart-block-components-order-summary-item__description {
	padding-left: $gap-large;
	padding-top: $gap;
	padding-bottom: $gap;
	line-height: 1.375;

	p,
	.kkart-block-components-product-metadata {
		line-height: 1.375;
		margin-top: #{ ( $gap-large - $gap ) / 2 };
	}
}

.kkart-block-components-order-summary-item__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
