@import "@wordpress/base-styles/breakpoints";

// Module Tabs
// (currently only used for the bar chart module at the top)

//TODO This className seems not to be used
ul.module-tabs {
	@include clear-fix;
	border-top: 1px solid var(--color-neutral-0);
	list-style: none;
	background: var(--color-surface);
	margin: 0;

	.module-tab {
		margin: 0;
		font-size: $font-body;
		clear: none;
		border-top: 1px solid var(--color-neutral-0);
		box-sizing: border-box;

		&:first-child {
			border-top: none;
		}

		@include breakpoint-deprecated( ">480px" ) {
			border-top: none;
			border-left: 1px solid var(--color-neutral-0);
			float: left;
			width: 25%;
			text-align: center;

			&:first-child {
				border-left: none;
			}
		}

		@include breakpoint-deprecated( "<480px" ) {
			width: auto;
			float: none;
			text-align: left;
		}

		a {
			color: var(--color-neutral-70);
		}

		a,
		.no-link {
			@extend %mobile-link-element;
			@include clear-fix;
			padding: 5px 0 10px;
			display: block;
			background: var(--color-surface);

			@include breakpoint-deprecated( "<480px" ) {
				line-height: 24px;
				padding-top: 10px;
				-webkit-touch-callout: none;
			}
		}

		.label {
			font-size: $font-body-extra-small;
			letter-spacing: 0.1em;
			line-height: inherit;
			text-transform: uppercase;

			@include breakpoint-deprecated( "<480px" ) {
				font-size: $font-body-small;
				line-height: 24px;
				float: left;
			}
		}

		.gridicon {
			vertical-align: middle;
			margin-right: 4px;
			margin-top: -2px;

			@include breakpoint-deprecated( "<480px" ) {
				width: 24px;
				height: 24px;
				margin-left: 24px;
				margin-right: 8px;
				float: left;
			}
		}

		.value {
			clear: both;
			display: block;
			line-height: 24px;
			color: var(--color-primary);
			transition: font-size 0.3s 0 ease-out;

			@include breakpoint-deprecated( "<480px" ) {
				clear: none;
				float: right;
				font-size: $font-body;
				margin-right: 24px;
				padding: 0;
			}
		}

		@include breakpoint-deprecated( ">480px" ) {
			// Hover state
			a:hover,
			a:hover .value,
			&.is-low a:hover,
			&.is-low a:hover .value {
				color: var(--color-link-dark);
			}

			a:hover {
				background: rgba(255, 255, 255, 0.5);
			}
		}

		// Focus state
		a:focus,
		a:focus .value,
		.stats-module &.is-selected a:focus,
		.stats-module &.is-selected a:focus .value,
		&.is-low a:focus,
		&.is-low a:focus .value {
			color: var(--color-link-dark);
		}

		a:focus {
			background: rgba(255, 255, 255, 0.5);
		}

		// Selected state
		.stats-module &.is-selected a {
			background: var(--color-surface);
			border-top: 1px solid var(--color-border-inverted);
			margin-top: -1px;
			cursor: default;
		}

		&.is-selected a,
		&.is-selected.is-low a {
			color: var(--color-neutral-70);
		}

		&.is-selected a .value,
		&.is-selected.is-low a .value,
		&.is-selected a:hover .value {
			color: var(--color-primary);
		}

		// Low state ('disabled')
		.is-low,
		&.is-low a .value {
			color: var(--color-neutral-light);
		}

		// Individual tab loading state
		&.is-loading a,
		&.is-loading a:hover {
			cursor: default;
		}

		.no-link .value {
			color: var(--color-neutral-70);

			&.is-low {
				color: var(--color-neutral-light);
			}
		}

		&.is-loading a .value,
		&.is-loading a:hover .value,
		&.is-loading .no-link .value {
			animation: loading-fade 1.6s ease-in-out infinite;
			cursor: default;
			font-size: 110%;
			color: var(--color-neutral-light);
		}

		&.is-loading.is-selected a .value,
		&.is-loading.is-selected a:hover .value {
			color: var(--color-neutral-light);
		}
	}

	// If there's only one tab (used on the Post/Video Details page)
	li:only-child {
		width: auto;
		float: none;
		text-align: left;

		a {
			line-height: 24px;
			padding-top: 10px;
		}

		.label {
			font-size: $font-body-small;
			line-height: 24px;
			float: left;
		}

		.gridicon {
			width: 24px;
			height: 24px;
			margin: 0 8px 0 24px;
			float: left;
		}

		.value {
			clear: none;
			float: right;
			margin-right: 24px;
		}
	}

	&.is-enabled {
		background: var(--color-neutral-0);

		&,
		li {
			border-color: var(--color-neutral-0);
		}

		a {
			background: var(--color-neutral-0);
		}
	}
}

.is-chart-tabs {

	.chart__bars {
		justify-content: space-between;
	}
	&.has-less-than-three-bars .chart__bars {
		justify-content: space-around;
	}
	.chart__bar {
		max-width: 156px;
	}

	/* styles border around chart for new date filtering design */
	&.is-date-filtering-enabled {
		background-color: var(--studio-white);
		border: 1px solid var(--studio-gray-5);
		border-radius: 4px;

		/* styling for chart header with new date filtering design */
		.stats-chart-tabs__header {
			container-type: inline-size;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 24px;

			@media (max-width: $break-medium) {
				padding: 8px 24px;
			}
		}

		.chart__legend{
			margin: 0 0 0 auto;
		}

		.chart__y-axis-marker {
			border-top-color: #DCDCDE;
		}

		.chart__y-axis {
			padding-left: 8px;
		}

		.stats-interval-dropdown, .stats-interval-display {
			margin-left: 48px;

			& > .components-button {
				width: auto;
				padding: 0;
				border: 0;
				box-shadow: none;

				& > svg {
					margin-left: 8px;
				}
			}

			@container (inline-size < #{$break-mobile}) {
				margin-left: 0;
			}
		}
	}

	/* styling for the chart header component */
	.stats-chart-tabs__header {

		.stats-chart-tabs__header-title {
			font-size: $font-body-large;
			font-weight: 500;
		}
	}

}

.stats-chart-tabs__line-chart {
	margin: 0 -24px;
	padding: 0 24px;
	min-height: 200px;
}

.stats-chart-tabs__type-toggle {
	margin-left: 8px;

	&.components-button-group .components-button.is-primary {
		z-index: 0;
	}

	.components-button.is-primary:focus:not(:disabled) {
		box-shadow: none;
	}

	.components-button.is-primary:is(:active, :hover, :focus):not(:disabled, [aria-disabled='true']) {
		background-color: var(--color-accent);
		border-color: var(--color-accent);
		color: var(--color-text-inverted);
	}

	.components-button.is-compact.has-icon:not(.has-text) {
		width: 44px;
	}
}
