@use "../../variables/colors" as colors;

#edd-filters {
	padding: 10px;
	margin: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;

	.filter-items {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		float: none;
		flex-grow: 1;

		.graph-option-section {
			display: flex;
			align-items: center;
		}

		.edd-date-range-picker[data-range='other'] {
			.edd-graphs-date-options {
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			.edd-date-range-dates, .edd-date-range-relative-dates {
				display: none;
			}
		}

		.edd-date-range-options {
			display: inline-block;
			margin: 10px 0;
		}

		.edd-graphs-date-options {
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}

		.edd-date-range-dates {
			display: flex;
			align-items: center;
			border: 1px solid #8c8f94;
			border-left: none;
			color: #2c3338;
			padding: 4px 10px;
			margin-left: -5px;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			cursor: pointer;
			gap: 4px;
			&.hidden {
				display: none;
			}
		}

		.edd-date-range-selected-date {
			display: inline-block;
		}

		.edd-date-range-relative-dates {
			display: flex;
			align-items: center;
			margin-left: 10px;
			&.hidden {
				display: none;
			}
		}

		.edd-date-range-selected-relative-date {
			position: relative;
			display: flex;
			align-items: center;
			border: 1px solid #8c8f94;
			padding: 4px 2px 4px 6px;
			color: #2c3338;
			margin-left: 10px;
			margin-right: 10px;
			border-radius: 4px;
			cursor: pointer;
			.arrow-down {
				width: 16px;
				height: auto;
				margin-left: 6px;
				margin-top: 2px;
				vertical-align: middle;
			}
			&.opened {
				.edd-date-range-relative-dropdown {
					display: block;
				}
			}
		}

		.edd-date-range-relative-dropdown {
			position: absolute;
			z-index: 99;
			width: 420px;
			left: 50%;
			top: 100%;
			margin-top: 10px;
			transform: translateX( -50% );
			background-color: #fff;
			border: 1px solid #8c8f94;
			border-radius: 4px;
			box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
			display: none;
			&:after {
				height: 10px;
				width: 10px;
				position: absolute;
				content: '';
				background: white;
				border: 1px solid #8c8f94;
				border-top-width: 0px;
				border-left-width: 0px;
				transform: rotate(-135deg);
				top: -6px;
				left: calc(50% - 4px);
			}

			.spinner {
				display: none;
			}
			&.loading {
				padding: 10px;
				text-align: center;
				.spinner {
					display: inline-block;
					visibility: visible;
					margin: 0;
					float: unset;
				}
			}
			&.loading *:not(.spinner) {
				display: none;
			}

			ul li {
				display: flex;
				align-items: center;
				padding: 2px 10px;
				opacity: 0.85;
				gap: 20px;
				&:hover, &.active {
					cursor: pointer;
					color: var( --wp-admin-theme-color );
					opacity: 1;
				}
				.date-range-name {
					width: 110px;
				}
			}
		}

		@media screen and ( max-width: 950px ) {
			.graph-option-section {
				margin-top: 8px;
				width: 100%;
			}

			.edd-date-range-picker {
				flex-wrap: wrap;
			}

			.edd-graphs-date-options {
				width: 100%;
				max-width: 100%;
				min-height: 40px;
				font-size: 14px;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			.edd-date-range-dates {
				width: 100%;
				margin-top: 10px;
				border: 1px solid #8c8f94;
				margin-left: unset;
				border-radius: 4px;
				font-size: 14px;
				padding: 8px 6px 8px 8px;
			}

			.edd-date-range-relative-dates {
				width: 100%;
				flex-wrap: wrap;
				margin-left: 0px;
				margin-top: 6px;
			}

			.edd-date-range-selected-relative-date {
				width: 100%;
				margin-top: 8px;
				margin-left: 0px;
				margin-right: 0;
				font-size: 14px;
				padding: 8px 6px 8px 8px;
				flex-wrap: wrap;
				.arrow-down {
					margin-left: auto;
				}
			}
			.edd-date-range-relative-dropdown {
				position: relative;
				width: 100%;
				left: 0;
				top: 0;
				transform: unset;
				box-shadow: unset;
				border: unset;
				margin: 0;

				&:after {
					display: none;
				}

				ul {
					margin-bottom: 0;
					li {
						padding-left: 0;
						padding-right: 0;
						justify-content: space-between;
						flex-wrap: wrap;
						gap: unset;
						.date-range-name, .date-range-dates {
							width: 100%;
						}
					}
				}

			}
		}

	}

	> p {
		color: colors.$wp-gray-700;
	}

	input[type="text"].edd_datepicker,
	input[type="number"] {
		max-width: 105px;
	}


	input[type="number"],
	.button-secondary {
		margin-bottom: 0;
	}

	.search-form {
		margin: 0;
	}

	@media screen and ( max-width: 480px ) {
		span {
			margin: 2px 0;
		}
	}
}

#edd-advanced-filters {
	position: relative;

	.inside {
		z-index: 99;
		position: absolute;
		top: 29px;
		right: 0;
		border: 1px solid colors.$wp-gray-200;
		padding: 0;
		background: colors.$white;
		box-shadow: 0 3px 5px rgba(0,0,0,0.2);
		min-width: 285px;
		opacity: 0;
		visibility: hidden;
	}

	fieldset {
		display: block;
		padding: 10px 15px 15px;
		margin: 10px 0;

		&:not(:last-of-type) {
			border-bottom: 1px solid colors.$wp-gray-200;
		}

		&:last-of-type {
			padding-bottom: 5px;
		}

		&.edd-add-on-filters {
			label,
			span,
			p,
			div {
				display: block;
				margin-bottom: 2px;
			}
		}
	}

	div.edd-select-chosen:not(:last-child) {
		margin-bottom: 10px;
	}

	&.open {
		.edd-advanced-filters-button {
			background: colors.$wp-gray-200;
			border-color: colors.$wp-gray-600;
			box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
			-webkit-transform: translateY(1px);
			transform: translateY(1px);
		}

		.inside {
			visibility: visible;
			opacity: 1;
			-webkit-transition: opacity 0.2s ease-in;
			-moz-transition: opacity 0.2s ease-in;
				-o-transition: opacity 0.2s ease-in;
					transition: opacity 0.2s ease-in;
		}
	}
}

.download_page_edd-reports {
	#edd-filters {
		margin-bottom: -1px;
		box-shadow: none;

		@media screen and ( max-width: 782px ) {
			gap: 0;
		}
	}
}

.edd-old-log-filters {
	margin-top: -30px;
	margin-left: 2px;
}
