$visitors: (
	new: #17a8e3,
	old: #0073aa
);

@include body-class(true) {
	.beehive-users-resume {
		margin: 30px 0;
		border-radius: $border-radius;
		background-color: #fbfbfb;

		p {
			display: none;
			margin: 0;
			color: #23282d;
			font: 400 12px/16px $font;
			letter-spacing: 0;
		}

		.beehive-charts {
			display: none;
			margin: 0;
		}

		.beehive-visitors-empty {
			text-align: center;
		}

		@each $type, $color in $visitors {
			.beehive-visitors-#{$type} {
				position: relative;
				padding-left: 20px;

				&:before {
					content: ' ';
					width: 10px;
					height: 10px;
					position: absolute;
					top: 3px;
					left: 0;
					border-radius: 20px;
					background-color: $color;
				}
			}
		}

		display: flex;
		align-items: center;
		padding: 15px 0;

		.beehive-charts {
			display: block;
			flex: 0 0 auto;
			margin: 0 65px;
		}

		.beehive-users-stats {
			min-width: 1px;
			display: flex;
			flex: 1;
			align-items: center;
			padding: 5px #{$sui-gutter / 2} 6px $sui-gutter;
			border-left: 1px solid #d8d8d8;
			text-align: initial;
		}

		@each $type, $color in $visitors {
			.beehive-visitors-#{$type} {
				min-width: 1px;
				display: block;
				flex: 1;
			}
		}
	}

	// SIZE: Small.
	&.beehive-widget-small,
	.inside.beehive-widget-small {
		.beehive-users-resume {
			margin: 0;
			padding-top: 15px;
			padding-bottom: 15px;

			.beehive-users-stats {
				flex-direction: column;
				padding-left: 0;
				padding-right: #{$sui-gutter-md / 2};
				border-left-width: 0;
			}

			@each $type, $color in $visitors {
				.beehive-visitors-#{$type} {
					width: 100%;
					display: block;
					flex: 0 0 auto;
					margin: 5px 0;
					padding: 7px 10px;
					border-radius: $border-radius;
					background-color: $color;
					color: $white;
					text-align: center;

					&:before {
						display: none;
					}
				}
			}
		}
	}
}