@include body-class(true) {
	.beehive-chart-pie {
		height: 100px;

		&-legend {
			margin: $sui-gutter-md -8px -#{$sui-gutter-md / 2};
			padding: 0;
			border: 0;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;

			.beehive-legend-item {
				width: 50%;
				display: flex;
				align-items: flex-start;
				flex: 0 0 50%;
				margin: 0;
				padding: 0 8px #{$sui-gutter-md / 2};
				border: 0;

				.beehive-legend-item-color {
					width: 8px;
					height: 8px;
					display: block;
					flex: 0 0 auto;
					margin: 7px 10px 7px 0;
					border-radius: 8px;
				}

				.beehive-legend-item-name {
					min-width: 1px;
					display: flex;
					flex: 1;
					align-items: flex-start;
					color: palette(gray, light);
					font: 500 13px/22px $font;
					letter-spacing: $font--letter-spacing;

					span {
						min-width: 1px;
						flex: 1;
						display: block;
					}

					strong {
						display: block;
						flex: 0 0 auto;
						margin-left: 5px;
						color: palette(gray, default);
						font-size: 14px;
						font-weight: bold;
					}
				}

				&:nth-child(2n + 1) {
					.beehive-legend-item-color {
						background-color: #17a8e3;
					}
				}

				&:nth-child(2n + 2) {
					.beehive-legend-item-color {
						background-color: #0582b5;
					}
				}

				@include media(min-width, md) {
					padding-bottom: #{$sui-gutter / 2};
				}
			}

			@include media(min-width, md) {
				margin-top: $sui-gutter;
				margin-bottom: -#{$sui-gutter / 2};
			}
		}
	}
}