<commit_before>/**
 * Data block styles.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.googlesitekit-data-block {
	--color-up: #{$c-chateau-green};
	--color-down: #{$c-thunderbird};

	position: relative;
	text-align: left;

	.post-php & {
		min-width: 150px;
	}

	.googlesitekit-wp-dashboard & {
		padding-top: 12px;
	}

	.googlesitekit-dashboard-adsense-stats & {
		align-items: flex-end;
		display: flex;

		@media (max-width: $bp-mobileOnly ) {
			align-items: normal;
			flex-direction: column;
		}
	}

	&--button {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: flex-end;
		padding-bottom: $grid-gap-phone;
		padding-top: $grid-gap-phone + 4px;
		text-align: center;
		transition: background-color $t-default ease-in-out;

		@media (min-width: $bp-desktop) {
			padding-bottom: $grid-gap-desktop;
			padding-top: $grid-gap-desktop + 4px;
		}
	}

	&--button::before {
		content: "";
		height: 4px;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity $t-default ease-in-out;
	}

	&--selected::before {
		opacity: 1;
	}

	$buttonColors: (
		1: $c-chart-1,
		2: $c-chart-2,
		3: $c-chart-3,
		4: $c-chart-4,
	);

	@each $button, $color in $buttonColors {

		&--button-#{$button}:not(.googlesitekit-data-block--is-gathering-data) {

			&:hover,
			&:focus,
			&:active {
				background-color: rgba($color, 0.1);
			}
		}

		&--button-#{$button}.googlesitekit-data-block--is-gathering-data {

			&::before {
				background-color: $c-jumbo;
			}
<commit_msg>Add a new --is-top-aligned data-block variant.<commit_after>/**
 * Data block styles.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.googlesitekit-data-block {
	--color-up: #{$c-chateau-green};
	--color-down: #{$c-thunderbird};

	position: relative;
	text-align: left;

	.post-php & {
		min-width: 150px;
	}

	.googlesitekit-wp-dashboard & {
		padding-top: 12px;
	}

	.googlesitekit-dashboard-adsense-stats & {
		align-items: flex-end;
		display: flex;

		@media (max-width: $bp-mobileOnly ) {
			align-items: normal;
			flex-direction: column;
		}
	}

	&--button {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: flex-end;
		padding-bottom: $grid-gap-phone;
		padding-top: $grid-gap-phone + 4px;
		text-align: center;
		transition: background-color $t-default ease-in-out;

		@media (min-width: $bp-desktop) {
			padding-bottom: $grid-gap-desktop;
			padding-top: $grid-gap-desktop + 4px;
		}
	}

	&--button::before {
		content: "";
		height: 4px;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity $t-default ease-in-out;
	}

	&--selected::before {
		opacity: 1;
	}

	&--is-top-aligned {
		justify-content: flex-start;
	}

	$buttonColors: (
		1: $c-chart-1,
		2: $c-chart-2,
		3: $c-chart-3,
		4: $c-chart-4,
	);

	@each $button, $color in $buttonColors {

		&--button-#{$button}:not(.googlesitekit-data-block--is-gathering-data) {

			&:hover,
			&:focus,
			&:active {
				background-color: rgba($color, 0.1);
			}
		}

		&--button-#{$button}.googlesitekit-data-block--is-gathering-data {

			&::before {
				background-color: $c-jumbo;
			}

{'fraction_non_alphanumeric': 0.15251099282573477, 'fraction_numerical': 0.015737097894006017, 'mean_word_length': 3.1240458015267176, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6034546', 'n_tokens_mistral': 1761, 'n_tokens_neox': 1538, 'n_words': 394}