/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-pollify-poll {
	box-sizing: border-box;
	position: relative;

	.pollify-poll-form {
		.poll-options-wrapper {
			margin-bottom: 1.5em;

			.option {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.option-selector {
					input[type="radio"], input[type="checkbox"] {
						width: 18px;
						height: 18px;
						cursor: pointer;

						.wp-block-pollify-editor-wrapper & {
							pointer-events: none;
							cursor: none;
						}

						&::before.radio {
							width: 11px;
							height: 11px;
							margin: 2.5px;
						}
					}

					input[type="radio"], input[type="checkbox"] {
						margin-top: auto;
						margin-right: 10px;
						vertical-align: middle;
					}
				}

				.option-label {
					cursor: pointer;

					.wp-block-pollify-editor-wrapper & {
						cursor: text;
					}
				}
			}
		}

		.poll-block-button {
			display: flex;

			&.align-left {
				justify-content: flex-start;
			}

			&.align-center {
				justify-content: center;
			}

			&.align-right {
				justify-content: flex-end;
			}

			.submit-button-wrapper {
				&.has-custom-width {
					max-width: none;

					.wp-block-button__link {
						width: 100%;
					}
				}

				&.wp-block-button-width-25 {
					width: calc(25% - (var(--wp--style--block-gap, 0.5em) * 0.75));
				}

				&.wp-block-button-width-50 {
					width: calc(50% - (var(--wp--style--block-gap, 0.5em) * 0.5));
				}

				&.wp-block-button-width-75 {
					width: calc(75% - (var(--wp--style--block-gap, 0.5em) * 0.25));
				}

				&.wp-block-button-width-100 {
					width: 100%;
					flex-basis: 100%;
				}
			}

			.submit-button {
				background-color: var( --pollify-submit-button-bg-color );
				color: var( --pollify-submit-button-text-color );

				&:hover {
					background-color: var( --pollify-submit-button-hover-bg-color );
					color: var( --pollify-submit-button-hover-text-color );
				}
			}
		}

		.closing-banner {
			background-color: var( --pollify-closing-banner-bg-color );
			color: var( --pollify-closing-banner-text-color );
			padding: 1rem;
			margin-top: 1rem;
			text-align: center;

			p {
				margin: 0;
				padding: 0;
			}
		}

		.loader-wrapper {
			display: flex;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var( --pollify-form-bg-color );
			opacity: 0.7;
			z-index: 9999;
			justify-content: center;
			align-items: center;

			.loader {
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				animation: loader 2s linear infinite;
				border: 3px solid var( --pollify-submit-button-bg-color );
				border-top-color: transparent;
				-webkit-animation: loader 2s linear infinite;

				@keyframes loader {
					0% {
						transform: rotate(0deg);
					}
					100% {
						transform: rotate(360deg);
					}
				}
				@-webkit-keyframes loader {
					0% {
						-webkit-transform: rotate(0deg);
					}
					100% {
						-webkit-transform: rotate(360deg);
					}
				}
			}
		}

		.response-message {
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			background-color: var( --pollify-submit-button-bg-color );
			color: var( --pollify-submit-button-text-color );
			padding: 1rem;
		}

		.errors {
			background-color: #f8dad8;
			color: #d82e20;
			border-left: 4px solid #d82e20;
			padding: 1rem;
			display: flex;
			justify-content: space-between;

			.close {
				display: inline-block;
				cursor: pointer;
			}
		}

		mark {
			background: none;
		}

		.pollify-login-required-message {
			text-align: center;
			padding: 1.5rem;
			background-color: #f9f9f9;
			border: 1px solid #e0e0e0;
			border-radius: 4px;

			p {
				margin: 0 0 0.5rem;
			}

			a {
				font-weight: 600;
			}
		}
	}

	.poll-answer-wrapper {

		.horizointal-bar-chart {
			width: 100%;
			margin: 0 auto;

			&__bar {
				width: 100%;
				margin-bottom: 15px;

				&-label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;

					.text {
						font-size: 1em;
						font-weight: 500;
						flex: 1;
					}

					.percentage {
						font-weight: 600;
						line-height: 1.6;
						margin-left: 1.2em;
					}

					.count {
						font-size: 0.75em;
						margin-left: 1.2em;
					}
				}

				&-indicator {
					width: 100%;
					height: 1em;
					border: 1px solid;
					border-color: rgba( var( --pollify-form-text-color ), 0.2 );

					.bar-fill {
						height: 1em;
						background-color: var( --pollify-submit-button-bg-color );
						text-align: right;
						line-height: 20px;
						color: white;
						box-sizing: border-box;
					}
				}
			}
		}
	}

	&.is-style-poll-inline-list {

		.pollify-poll-form {

			.poll-options-wrapper {
				display: flex;
				flex-wrap: wrap;
				gap: 1.5rem;
			}
		}
	}
}

.pollify-general-settings-sidebar-wrap {
	.components-datetime__time-wrapper {
		align-items: flex-start !important;
	}

	.components-datetime__date {
		div:nth-child(2) {
			gap: calc(4px);
		}
	}
}