/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/weather-prevision-description/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.prevision-description-header {
	display: flex;
	height: 139px;
	width: 100%;
	background-color: var(--wp--preset--color--bg-surface-strong);
}

@media (max-width: 890px) {
	.prevision-description-header {
		height: 100px;
	}
}

.prevision-description-content {
	background-color: var(--wp--preset--color--bg-primary);
	height: auto;
	width: 100%;

	.state {
		padding: 30px 0;
		text-align: center;
	}

	p {
		color: var(--wp--preset--color--text-primary);
		font-weight: 300;
		font-style: Light;
		font-size: 36px;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.content-weather {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 10px 53px;
	}

	.title {
		font-size: 36px;
	}

	.desc {
		font-size: 24px;
	}

	.weather-content {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.content-text-div {
		padding: 10px 53px;
	}
}

@media (max-width: 690px) {
	.prevision-description-content {
		height: auto;

		.content-weather {
			padding: 10px 38px;
		}

		.title {
			font-size: 28px;
		}

		.desc {
			font-size: 20px;
		}
	}
}

@media (max-width: 500px) {
	.prevision-description-content {
		height: auto;

		.content-weather {
			padding: 10px 20px;
		}

		.title {
			font-size: 24px;
		}

		.desc {
			font-size: 16px;
		}
	}
}

.prevision-description-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;

	.content,
	.active-card {
		height: 100%;
		cursor: pointer;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
		max-width: 129px;
		transition: max-width 0.3s ease-out;
		overflow: hidden;
		color: var(--wp--preset--color--text-primary);
		transform-origin: right;
	}

	.active-card {
		position: relative;
		max-width: 100%;
		background-color: var(--wp--preset--color--bg-primary);
		padding: 0 20px;
	}

	.date-header,
	.temp-block {
		display: flex;
		flex-direction: column;
	}

	.date-header {
		width: -moz-max-content;
		width: max-content;
		align-items: center;
		font-size: 36px;
	}

	.weather-with-icon {
		gap: 10px;

		.temp-card {
			gap: 14px;
		}

		.max-temp-card {
			font-size: 40px;
		}

		.min-temp-card {
			font-size: 30px;
		}

		.temp-data {
			gap: 3px;
		}

		.arrow-up {
			height: 27px;
		}

		.arrow-down {
			height: 17px;
		}
	}

	.icon-weather-card {
		height: 79px;
		width: 79px;
	}

	.bar {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		height: 1px;
		background-color: #000;
		width: calc(100% - 40px);
	}
}

@media (max-width: 890px) {
	.prevision-description-card {
		.date-header {
			font-size: 26px;
		}

		.weather-with-icon {
			.max-temp-card {
				font-size: 30px;
			}

			.min-temp-card {
				font-size: 20px;
			}

			.arrow-up {
				height: 18px;
			}

			.arrow-down {
				height: 9px;
			}
		}

		.icon-weather-card {
			height: 65px;
			width: 65px;
		}

		.active-card {
			padding: 0 10px;
		}
	}
}

@media (max-width: 690px) {
	.prevision-description-card {
		.date-header {
			font-size: 22px;
		}

		.weather-with-icon {
			gap: 6px;

			.temp-card {
				gap: 10px;
			}
			.max-temp-card {
				font-size: 26px;
			}

			.min-temp-card {
				font-size: 16px;
			}

			.arrow-up {
				height: 14px;
			}

			.arrow-down {
				height: 9px;
			}
		}

		.icon-weather-card {
			height: 40px;
			width: 40px;
		}
	}
}

@media (max-width: 560px) {
	.prevision-description-card {
		.content {
			gap: 8px;
		}

		.date-header {
			font-size: 18px;
		}

		.weather-with-icon {
			.max-temp-card {
				font-size: 22px;
			}

			.min-temp-card {
				font-size: 16px;
			}

			.arrow-up {
				height: 10px;
			}

			.arrow-down {
				height: 8px;
			}
		}

		.icon-weather-card {
			height: 30px;
			width: 30px;
		}
	}
}

@media (max-width: 420px) {
	.prevision-description-card {
		.date-header {
			font-size: 15px;
		}

		.weather-with-icon {
			.max-temp-card {
				font-size: 16px;
			}

			.min-temp-card {
				font-size: 13px;
			}

			.arrow-up {
				height: 10px;
			}

			.arrow-down {
				height: 8px;
			}
		}

		.active-card {
			padding: 0 5px;
		}

		.icon-weather-card {
			height: 25px;
			width: 25px;
		}
	}
}

.city-location-div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;

	.fav-img {
		width: 42px;
		height: 40px;
	}

	.city-location {
		color: var(--wp--preset--color--text-primary);
		font-size: 48px;
	}
}

.print-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 53px;
	width: 160px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--base);
	border: none;
	cursor: pointer;

	font-weight: 300;
	font-style: Light;
	font-size: 36px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	color: var(--wp--preset--color--text-primary);

	img {
		width: 38px;
		height: 30px;
	}
}

@media (max-width: 800px) {
	.print-button {
		font-size: 28px;
	}
}

@media (max-width: 500px) {
	.print-button {
		padding: 0 10px;
		width: -moz-fit-content;
		width: fit-content;
		font-size: 24px;

		img {
			width: 30px;
			height: 22px;
		}
	}
}

.weather-prevision-description {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	justify-content: left;
	width: 95%;
	max-width: 1263px;
	height: auto;

	.weather-prevision-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content-prevision {
		width: 100%;
		max-width: 974px;
		height: auto;
		margin: auto;
		border-radius: 30px;
		overflow: hidden;
	}

	.city-location-div {
		text-align: left;
		justify-content: left;
	}
}

@media (max-width: 800px) {
	.weather-prevision-description {
		height: -moz-fit-content;
		height: fit-content;
		gap: 20px;

		.content-prevision {
			height: -moz-fit-content;
			height: fit-content;
		}

		.city-location {
			font-size: 38px;
		}
	}
}

@media (max-width: 500px) {
	.weather-prevision-description {
		.weather-prevision-title {
			flex-direction: column;
			gap: 8px;
			justify-content: center;
		}

		.city-location-div {
			justify-content: center;

			.city-location {
				text-align: center;
			}
		}
	}
}

/*# sourceMappingURL=style-index.css.map*/