@use "sass:math";

@include body-class(true, false) {

	.sui-list {
		margin: $sui-gutter-md 0;
		padding: 0;
		border: 0;

		&, li {
			list-style: none;
		}

		li {
			display: flex;
			margin: 0;
			padding: 9px 0;
			border: 0;
			border-bottom: 1px solid palette(silver, soft);
			color: $summary-list--color;
			font-size: 13px;
			line-height: 22px;
			font-family: $font;
			font-weight: 500;
			letter-spacing: $font--letter-spacing;

			[class*="sui-list-"] {
				padding: 0 math.div($sui-gutter-md, 2);

				&:first-child {
					padding-left: 0;

					@include media(min-width, md) {
						padding-left: 0;
					}
				}

				&:last-child {
					padding-right: 0;

					@include media(min-width, md) {
						padding-right: 0;
					}
				}

				@include media(min-width, md) {
					padding: 0 math.div($sui-gutter, 2);
				}
			}

			.sui-list-label {
				flex: 1;
				color: $summary-list--label;
			}

			.sui-list-detail {
				flex: 0 0 auto;
				text-align: right;
			}

			&:first-child {
				padding-top: 0;

				@include media(min-width, md) {
					padding-top: 0;
				}
			}

			&:last-child {
				padding-bottom: 0;
				border-bottom: 0;

				@include media(min-width, md) {
					padding-bottom: 0;
				}
			}

			@include media(min-width, md) {
				padding: 19px 0;
			}
		}

		&:first-child {
			margin-top: 0;

			@include media(min-width, md) {
				margin-top: 0;
			}
		}

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

			@include media(min-width, md) {
				margin-bottom: 0;
			}
		}

		// FIX:
		// Prevent .sui-list from having nested lists
		// since this element doesn't support it.
		ul, ol {
			display: none;
		}

		@include media(min-width, md) {
			margin: $sui-gutter 0;
		}
	}
}

@include body-class(true, true) {

	.sui-list {

		li {

			[class*="sui-list-"] {

				&:first-child {
					padding-right: 0;
					padding-left: math.div($sui-gutter-md, 2);

					@include media(min-width, md) {
						padding-right: 0;
						padding-left: math.div($sui-gutter, 2);
					}
				}

				&:last-child {
					padding-right: math.div($sui-gutter-md, 2);
					padding-left: 0;

					@include media(min-width, md) {
						padding-right: math.div($sui-gutter, 2);
						padding-left: 0;
					}
				}
			}
		}
	}
}