@include body-class(true) {
	.beehive-tabs {
		display: flex;
		flex-direction: column-reverse;

		.beehive-tabs-tablist {
			display: block;
			margin: 0 -#{$sui-gutter-md};
			padding: 0 $sui-gutter-md;
			border: 0;

			&,
			li {
				list-style: none;
			}

			.beehive-tab {
				margin: 0;
				padding: #{$sui-gutter-md - 4px} $sui-gutter-md $sui-gutter-md;
				border: 0;
				border-radius: 0;

				span {
					display: block;
					text-align: left;
				}

				.beehive-tab-title {
					margin-bottom: 6px;
					font: bold 12px/16px $font;
					letter-spacing: $font--letter-spacing;
					text-transform: uppercase;
				}

				.beehive-tab-value {
					color: #23282d;
					font: 500 25px/33px $font;
					letter-spacing: $font--letter-spacing;
				}

				.beehive-tab-trend {
					color: palette(gray, dark);
					font: 500 13px/18px $font;
					letter-spacing: $font--letter-spacing;

					[class*='sui-icon-'] {
						&:before {
							color: inherit;
						}
					}

					&.beehive-red {
						color: $red;
					}

					&.beehive-green {
						color: $green;
					}
				}

				.beehive-tab-value-wrap {
					.beehive-tab-value {
						@include media(min-width, md) {
							flex: 1 1 auto;
						}
					}

					.beehive-tab-trend {
						@include media(min-width, md) {
							flex: 0 0 auto;
						}
					}

					@include media(min-width, md) {
						display: flex;
						align-items: center;
					}
				}

				&:first-child {
					@include media(min-width, md) {
						border-bottom-left-radius: $border-radius;
					}
				}

				&:last-child {
					margin: 0;

					@include media(max-width, md) {
						border-bottom-right-radius: $border-radius;
						border-bottom-left-radius: $border-radius;
					}

					@include media(min-width, md) {
						border-bottom-right-radius: $border-radius;
					}
				}

				@include media(max-width, md) {
					width: 100%;
					display: block;
				}

				@include media(min-width, md) {
					min-width: 1px;
					flex: 1;
				}
			}

			li.beehive-tab {
				.beehive-tab-title {
					color: palette(silver, medium);
				}

				.beehive-tab-value {
					color: #23282d;
				}

				.beehive-tab-trend {
					display: none;
				}
			}

			button.beehive-tab {
				cursor: pointer;
				background-color: $white;
				-webkit-tap-highlight-color: transparent;
				transition: $transition;

				* {
					pointer-events: none;
				}

				.beehive-tab-title {
					color: palette(gray, light);
				}

				.beehive-tab-value {
					color: palette(gray, default);
				}

				&,
				&:hover,
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}

				&:hover,
				&:focus,
				&:active {
					background-color: rgba(23, 168, 227, 0.03);
					box-shadow: inset 0 -2px 0 0 $blue;
				}

				&.beehive-active {
					background-color: rgba(23, 168, 227, 0.03);
					box-shadow: inset 0 -2px 0 0 $blue;

					.beehive-tab-title,
					.beehive-tab-value {
						color: $blue;
					}
				}
			}

			@include media(min-width, md) {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.beehive-tab-panel {
			.beehive-chart {
				height: 275px;
				display: block;
				margin-bottom: #{$sui-gutter-md * 2};
				padding: $sui-gutter-md $sui-gutter-md 0;

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

	.sui-box-body {
		+ .beehive-tabs[data-state='empty'] {
			.beehive-tabs-tabpanel {
				padding-top: 0;

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