/* stylelint-disable no-descending-specificity */
@use "sass:color";
$color_1: #fff;
$font-family_1: helvetica, sans-serif;
$border-top-color_1: #333;
$border-right-color_1: #333;
$border-bottom-color_1: #333;
$border-left-color_1: #333;
$base_bg_color: #2882cce7;
$base_text_color: #fff;
$normal_text_color: #3d3d3d;

/* START TOOLTIP STYLES */

/* Applies to all tooltips */

/* Make the tooltips respond to hover */

/* don't show empty tooltips */

/* FLOW: UP */

/* FLOW: DOWN */

/* FLOW: LEFT */

/* FLOW: RIGHT */

/* KEYFRAMES */
@keyframes tooltips-vert {

	to {
		opacity: 0.9;
		transform: translate(-50%, 0);
	}
}

@keyframes tooltips-horz {

	to {
		opacity: 0.9;
		transform: translate(0, -50%);
	}
}

/* FX All The Things */
[tooltip] {
	position: relative;

	&::before {
		text-transform: none;
		font-size: 0.9em;
		line-height: 1;
		user-select: none;
		pointer-events: none;
		position: absolute;
		display: none;
		opacity: 0;
		content: "";
		border: 5px solid transparent;
		z-index: 1001;
	}

	&::after {
		text-transform: none;
		font-size: 0.9em;
		line-height: 1;
		user-select: none;
		pointer-events: none;
		position: absolute;
		display: none;
		opacity: 0;
		content: attr(tooltip);
		font-family: $font-family_1;
		text-align: center;
		min-width: 3em;
		max-width: 21em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 1ch 1.5ch;
		border-radius: 0.3ch;
		box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
		background: #333;
		color: $color_1;
		z-index: 1000;
	}

	&:hover {

		&::before {
			display: block;
		}

		&::after {
			display: block;
		}
	}

	&:not([flow]) {

		&::before {
			bottom: 100%;
			border-bottom-width: 0;
			border-top-color: $border-top-color_1;
			left: 50%;
			transform: translate(-50%, -0.5em);
		}

		&::after {
			bottom: calc(100% + 5px);
			left: 50%;
			transform: translate(-50%, -0.5em);
		}

		&:hover {

			&::before {
				animation: tooltips-vert 300ms ease-out forwards;
			}

			&::after {
				animation: tooltips-vert 300ms ease-out forwards;
			}
		}

	}
}

[tooltip=""] {

	&::before {
		display: none !important;
	}

	&::after {
		display: none !important;
	}
}

[tooltip][flow^="up"] {

	&::before {
		bottom: 100%;
		border-bottom-width: 0;
		border-top-color: $border-top-color_1;
		left: 50%;
		transform: translate(-50%, -0.5em);
	}

	&::after {
		bottom: calc(100% + 5px);
		left: 50%;
		transform: translate(-50%, -0.5em);
	}

	&:hover {

		&::before {
			animation: tooltips-vert 300ms ease-out forwards;
		}

		&::after {
			animation: tooltips-vert 300ms ease-out forwards;
		}
	}
}

[tooltip][flow^="down"] {

	&::before {
		top: 100%;
		border-top-width: 0;
		border-bottom-color: $border-bottom-color_1;
		left: 50%;
		transform: translate(-50%, 0.5em);
	}

	&::after {
		top: calc(100% + 5px);
		left: 50%;
		transform: translate(-50%, 0.5em);
	}

	&:hover {

		&::before {
			animation: tooltips-vert 300ms ease-out forwards;
		}

		&::after {
			animation: tooltips-vert 300ms ease-out forwards;
		}
	}
}

[tooltip][flow^="left"] {

	&::before {
		top: 50%;
		border-right-width: 0;
		border-left-color: $border-left-color_1;
		left: calc(0em - 5px);
		transform: translate(-0.5em, -50%);
	}

	&::after {
		top: 50%;
		right: calc(100% + 5px);
		transform: translate(-0.5em, -50%);
	}

	&:hover {

		&::before {
			animation: tooltips-horz 300ms ease-out forwards;
		}

		&::after {
			animation: tooltips-horz 300ms ease-out forwards;
		}
	}
}

[tooltip][flow^="right"] {

	&::before {
		top: 50%;
		border-left-width: 0;
		border-right-color: $border-right-color_1;
		right: calc(0em - 5px);
		transform: translate(0.5em, -50%);
	}

	&::after {
		top: 50%;
		left: calc(100% + 5px);
		transform: translate(0.5em, -50%);
	}

	&:hover {

		&::before {
			animation: tooltips-horz 300ms ease-out forwards;
		}

		&::after {
			animation: tooltips-horz 300ms ease-out forwards;
		}
	}
}

/* END TOOLTIP STYLES */

body.toplevel_page_pollify {

	#wp-pollify-header {
		border-top: 4px solid #ffb7bb;
		padding: 24px 20px;
		margin-left: -20px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		.logo-wrapper {
			display: flex;
			align-items: center;
			gap: 10px;

			svg {
				width: 40px;
				height: 40px;
				fill: #ff4187;
			}

			h1 {
				font-size: 22px;
				font-weight: 500;
				color: $normal_text_color;
			}
		}

		.quick-links {
			display: flex;
			align-items: center;
			gap: 20px;

			a {
				text-decoration: none;
				font-size: 15px;
				font-weight: 400;
				color: $normal_text_color;
			}
		}
	}

	#wpcontent {
		position: relative;
	}

	#wp-pollify-header-screen {
		margin: 0;
		position: absolute;
		top: -1px;
		left: 20px;
		right: 0;
		z-index: 99;
	}
}

table.toplevel_page_pollify {

	thead {

		th {

			&.column-title {
				width: 30%;
			}

			&.column-type {
				width: 5%;
			}

			&.column-reference {
				width: 22%;
			}

			&.column-status,
			&.column-response {
				width: 10%;
			}
		}
	}
}

.pollify-status {
	padding: 5px 10px;
	border-radius: 5px;
	color: #fff;
	display: flex;
	width: fit-content;
	align-items: center;

	span.dashicons {
		font-size: 15px;
		display: flex;
		align-items: center;
		margin-left: 5px;
		width: 15px;
	}

	&.status-publish {
		background-color: #46b450;
	}

	&.status-draft {
		background-color: #f0ad4e;
	}

	&.status-schedule {
		background-color: #5bc0de;
	}

	&.status-trash {
		background-color: #d9534f;
	}
}

.pollify-notice {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-left-width: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	margin: 5px 0 15px;
	padding: 1px 12px;

	&.notice-error {
		border-left-color: #d63638;
	}

	&.notice-success {
		border-left-color: #00a32a;
	}

	&.notice-warning {
		border-left-color: #dba617;
	}

	&.notice-info {
		border-left-color: #72aee6;
	}

	p {
		font-size: 13px;
		margin: 0.5em 0;
		padding: 2px;
		color: $normal_text_color;
	}
}

.pollify-poll-details-wrap {

	.flag-icon {
		width: 30px;
		height: 22.5px;
	}

	.heading-wrap {
		display: flex;
		gap: 32px;
		justify-content: space-between;
		align-items: center;

		h3 {
			display: flex !important;
			align-items: center;
			gap: 8px;
			font-size: 1.5rem;
		}

		.action-wrapper {
			display: flex;
			gap: 10px;
			align-items: center;

			a {
				display: flex;
				align-items: center;
				gap: 6px;

				span.dashicons {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.navigation {
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 24px;
		border-radius: 10px;
		border-top: 1px solid #e0e0e0;

		ul {
			margin: 0;
			padding: 0;
			display: flex;
			gap: 12px;
			align-items: center;

			li {
				margin: 0;
				padding: 0;
				box-sizing: border-box;

				&:first-child {
					border-bottom-left-radius: 10px;
				}

				&.active {

					a {
						color: $base_bg_color;
						border-color: $base_bg_color;
					}
				}

				a {
					position: relative;
					display: flex;
					gap: 10px;
					align-items: center;
					text-decoration: none;
					padding: 15px 20px;
					box-sizing: border-box;
					font-size: 14px;
					color: $normal_text_color;
					border-bottom: 3px solid transparent;

					&:hover {
						color: $base_bg_color;
					}

					&::after {
						content: " ";
						display: block;
						width: 2px;
						height: 15px;
						background-color: color.adjust($normal_text_color, $lightness: 60%);
						position: absolute;
						right: -10px;
					}
				}

				&:last-child {

					a {

						&::after {
							display: none;
						}
					}
				}
			}
		}
	}

	.details-content {
		margin-top: 24px;

		$gap: 30px;

		.meta-cards {
			display: flex;
			gap: $gap;
			flex-direction: row;
			justify-content: space-between;

			.meta-card-column {
				box-sizing: border-box;
				flex: 0 0 calc(65% - $gap / 2);

				&.secondary {
					flex: 0 0 calc(35% - $gap / 2);
				}
			}
		}

		.meta-card {
			background-color: #fff;
			border-radius: 8px;
			box-sizing: border-box;
			margin-bottom: 24px;
			border: 1px solid #e0e0e0;

			.heading {
				padding: 20px;
				border-bottom: 1px solid #e0e0e0;

				h2 {
					margin: 0;
					padding: 0;
				}
			}

			p.no-data-text {
				font-size: 1.3em;
				margin: 0;
				padding: 0;
			}
		}

		.result-overview {

			.meta-card-content {
				box-sizing: border-box;
				padding: 20px 20px 30px;

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

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

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

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

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

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

						&-indicator {
							width: 100%;
							height: 1.4em;
							border: 1px solid #f1f1f1;
							background-color: #f1f1f1;
							box-sizing: border-box;

							.bar-fill {
								height: 1.4em;
								background-color: $base_bg_color;
								text-align: right;
								line-height: 20px;
								color: #fff;
								box-sizing: border-box;
							}
						}
					}

					&__total-count {
						font-size: 1.3em;
						font-weight: 500;
						margin-top: 25px;
						display: flex;
						justify-content: flex-end;
					}
				}
			}

		}

		.popular-location {
			box-sizing: border-box;

			.location-data {
				display: flex;
				gap: 30px;
				justify-content: space-between;
				padding: 20px;

				.location-map {
					flex: 0 0 calc(70% - 15px);

					.geo-chart-map {
						width: 100%;
						height: 450px;
					}
				}

				.location-list {
					flex: 0 0 calc(30% - 15px);
					max-height: 450px;
					overflow: auto;

					.location {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 1.2em;
						margin-bottom: 20px;

						.country {
							display: flex;
							align-items: center;
							gap: 12px;
						}

						.count {
							font-weight: 600;
							margin-right: 15px;
						}
					}
				}
			}
		}

		.recent-votes {
			box-sizing: border-box;
			padding: 20px;

			ul.vote-list {
				margin: 0;

				li {
					padding: 15px 0;
					border-bottom: 1px solid #e0e0e0;

					.vote-info {
						display: flex;
						gap: 15px;
						align-items: center;
						font-size: 1.1em;
						justify-content: space-between;
						margin-bottom: 1rem;

						.user-name {
							font-size: 1.15em;
						}

						.other-details {
							display: flex;
							align-items: center;
							gap: 8px;

							.flag-icon {
								width: 24px;
								height: 18px;
							}
						}
					}

					.vote-details {
						display: flex;
						gap: 20px;
						align-items: center;
						justify-content: space-between;
						color: color.adjust($normal_text_color, $lightness: 20%);
						font-size: 1em;

						span.option {
							flex: 0 0 calc(60% - 10px);
						}

						span.time {
							flex: 0 0 calc(40% - 10px);
							text-align: right;
						}
					}

					&:nth-last-child(2),
					&:last-child {
						border-bottom: none;
					}

					&.see-more-link {
						text-align: center;
						margin-top: 24px;

						a {
							font-size: 1.2em;
							text-decoration: none;
							color: $base_bg_color;
						}
					}
				}
			}
		}

		.ip-overview {
			box-sizing: border-box;
			padding: 20px;

			table.ips-table {
				border: none;

				thead {

					tr {

						th {
							font-size: 1.2em;
							text-align: left;
							padding: 10px 12px;
							border-bottom: 1px solid #eaecf0;
							font-weight: 500;
							width: 35%;

							&:last-child {
								width: 20%;
							}
						}
					}
				}

				tbody {

					tr {

						td {
							border-bottom: 1px solid #eaecf0;
							font-size: 1.1em;
							padding: 15px;

							&.country {
								display: flex;
								gap: 10px;
								align-items: center;
							}
						}

						&:last-child td {
							border-bottom: none !important;
						}
					}
				}
			}

			.see-more-link {
				text-align: right;
				margin-top: 32px;

				a {
					font-size: 1.2em;
					text-decoration: none;
					color: $base_bg_color;
				}
			}
		}

		.votes-table,
		.ips-table {

			table {
				border: 1px solid #eaecf0;
				border-radius: 5px;
				margin-top: 16px;

				&.striped {

					tr:nth-child(odd) {
						background-color: transparent;
					}
				}

				thead {

					th {
						font-size: 1.2em;
						text-align: left;
						padding: 10px 12px;
						border-bottom: 1px solid #eaecf0;
						font-weight: 500;

						&.column-vote {
							width: 30%;
						}

					}
				}

				tfoot {

					th {
						font-size: 1.2em;
						text-align: left;
						padding: 10px 12px;
						font-weight: 500;
						border-top: 1px solid #eaecf0;
					}
				}

				tbody {

					tr {

						&:hover {
							background-color: #f7fbfd !important;
						}

						td {
							border-bottom: 1px solid #eaecf0;
							font-size: 1.1em;
							padding: 10px 15px;

							&.column-location {

								.vote-location {
									display: flex;
									gap: 10px;
									align-items: center;
								}
							}
						}
					}
				}
			}
		}

		table.ips-table {
			margin-top: 16px;

			thead {

				tr {

					th {
						font-size: 1.2em;
						text-align: left;
						padding: 10px 12px;
						border-bottom: 1px solid #eaecf0;
						font-weight: 500;
					}
				}
			}
		}

		.ip-address-data {
			display: flex;
			gap: 12px;
			align-items: center;

			span {
				font-weight: 500;
			}

			.ip-actions {
				display: none;
			}

			&:hover {

				.ip-actions {
					display: flex;
					gap: 10px;
					align-items: center;
					font-size: 0.8125rem;
				}
			}
		}
	}
}

// Tablet: keep poll admin controls readable before the mobile breakpoint.
@media screen and (max-width: 1024px) {

	.pollify-poll-details-wrap {

		.heading-wrap {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;

			.action-wrapper {
				flex-wrap: wrap;
			}
		}

		.navigation ul {
			flex-wrap: wrap;
			gap: 0;

			li a {
				padding: 10px 12px;
				font-size: 13px;
			}
		}

		.popular-location .meta-card-content.location-data {
			flex-direction: column;
			align-items: stretch;

			.location-map,
			.location-list {
				flex: 0 0 auto;
				width: 100%;
				max-width: 100%;
			}

			.location-map {
				overflow: hidden;
			}

			.location-map .geo-chart-map {
				height: 280px;
				overflow: hidden;
			}

			.location-list {
				max-height: none;
			}
		}

		.recent-votes ul.vote-list li {

			.vote-info {
				flex-wrap: wrap;
				gap: 6px;

				.user-name {
					flex: 1 1 100%;
				}

				.other-details {
					flex: 1 1 100%;
					flex-wrap: wrap;
				}
			}

			.vote-details {
				flex-wrap: wrap;
				gap: 4px;

				span.option {
					flex: 0 0 100%;
				}

				span.time {
					flex: 0 0 100%;
					text-align: left;
				}
			}
		}

		.details-content .ip-address-data {
			flex-wrap: wrap;

			.ip-actions {
				display: flex;
				gap: 10px;
				align-items: center;
				font-size: 0.8125rem;
			}
		}
	}
}

// Mobile admin breakpoint.
@media screen and (max-width: 782px) {

	table.toplevel_page_pollify {

		thead th.column-title {
			width: 100%;
		}
	}

	body.toplevel_page_pollify #wp-pollify-header {
		flex-direction: column;
		gap: 12px;
		position: relative;
		top: 46px;
		padding: 16px;
		margin-left: -10px;

		.quick-links {
			flex-wrap: wrap;
			gap: 12px;
		}
	}

	.pollify-poll-details-wrap {

		.navigation ul {
			column-gap: 16px;
			row-gap: 8px;
		}

		.details-content {

			.meta-cards {
				flex-direction: column;

				.meta-card-column,
				.meta-card-column.secondary {
					flex: 0 0 auto;
					width: 100%;
					max-width: 100%;
				}
			}

			.meta-card {
				width: 100%;
			}
		}
	}
}
