/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-pesistulokset-ottelut {
	.pt-match {
		background: #ffffff;
		border-radius: .5rem;
		padding: 1.5rem 1rem;
		margin-bottom: 1rem;
		text-align: center;
		color: #111;

		.match-date {
			margin-bottom: 1rem;

			.stadium {
				color: #8F8F8F;
			}
		}

		.teams {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;


			.home, .away {
				flex: 0 1 300px;
				display: flex;
				align-items: center;
				gap: .5rem;

				img {
					max-width: 100px;
					height: auto;
				}
			}

			.home {
				flex-direction: row-reverse;
			}

			.match-results {
				.match-score {
					font-weight: bold;
				}
			}

		}

		.live-results {
			display: flex;
			gap: 1rem;
			justify-content: center;
		}

		.period {
			display: flex;
			flex-direction: column;
			gap: 5px;

			&.period-total {
				.innings {
					.inning {
						background-color: #3670c0;
					}
				}
			}
		}

		.innings {
			display: flex;
			gap: 5px;

			.inning {
				width: 2em;
				height: 2em;
				line-height: 2em;
				text-align: center;
				background-color: #3670c07f;
				border-radius: 3px;
				color: #fff;

				&.total {
					background-color: #3670c0;
				}
			}
		}
	}
}