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

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

	input[type="text"],
	input[type="number"] {
		min-height: 32px;
		line-height: 30px;
		padding: 0 8px;
	}

	.ts-wrapper {
		min-width: 200px;
	}

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

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

		// The fields wrapper provides a single unified border around the select
		// and the date display. The relative-dates section sits outside this
		// wrapper, so overflow: visible is not needed here. Border-radius on
		// the individual child elements (select left corners, date display
		// right corners) provides the rounded appearance at the container
		// edges without requiring overflow: hidden.
		.edd-date-range-picker-fields {
			display: flex;
			align-items: center;
			border: 1px solid colors.$wp-input-border-2;
			border-radius: 4px;

			body[class*="branch-7"] & {
				border-radius: 2px;
			}
		}

		.edd-date-range-picker[data-range='other'] {
			.edd-date-range-dates, .edd-date-range-relative-dates {
				display: none;
			}
		}

		.edd-date-range-options .edd_datepicker {
			width: 105px;
		}

		// Remove the browser-default border and appearance so the parent
		// container's border becomes the sole visual boundary. appearance: none
		// is required to make border-radius work on the select element, which
		// allows us to round only the left corners to match the container's
		// inner radius (4px outer - 1px border = 3px). A custom SVG arrow
		// replaces the native dropdown indicator removed by appearance: none.
		// Negative margins on three sides bleed the select flush against the
		// parent border without a gap or double-border artifact.
		.edd-graphs-date-options {
			appearance: none;
			-webkit-appearance: none;
			border: none;
			outline: none;
			background-color: transparent;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%238c8f94' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 6px center;
			padding-right: 28px;
			margin: -1px 0 -1px -1px;
			height: calc( 100% + 2px );
			cursor: pointer;
		}

		.edd-date-range-dates {
			display: flex;
			align-items: center;
			// The outer border is on the parent. A left-only divider separates
			// the date display from the select without adding extra box borders.
			// Right-side border-radius matches the inner radius of the container.
			border-left: 1px solid colors.$wp-input-border-2;
			color: colors.$wp-input-text;
			padding: 4px 10px;
			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 colors.$wp-input-border-2;
			padding: 4px 2px 4px 6px;
			color: colors.$wp-input-text;
			margin-left: 10px;
			margin-right: 10px;
			border-radius: 4px;
			cursor: pointer;

			body[class*="branch-7"] & {
				border-radius: 2px;
				padding: 6px 4px 6px 6px;
			}

			.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 colors.$wp-input-border-2;
			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 colors.$wp-input-border-2;
				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( --edd-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%;
				flex-wrap: wrap;
			}

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

			// At mobile widths the select stacks above the date display and
			// should span the full container width. The top corners are rounded
			// (matching the parent container) while the bottom corners are
			// square so the select and date display meet flush with no gap.
			.edd-graphs-date-options {
				width: calc( 100% + 2px );
				max-width: calc( 100% + 2px );
				min-height: 40px;
				font-size: 14px;
				border-top-right-radius: 3px;
				border-bottom-left-radius: 0;
			}

			.edd-date-range-dates {
				width: 100%;
				// When stacked, the divider becomes a top border rather than
				// a left border. The bottom corners are rounded to match the
				// parent container; the top corners are square.
				border-left: none;
				border-top: 1px solid colors.$wp-input-border-2;
				border-top-right-radius: 0;
				border-bottom-left-radius: 3px;
				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 0 0 auto;
	}

	@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: #fff;
		box-shadow: 0 3px 5px rgba(0,0,0,0.2);
		min-width: 285px;
		opacity: 0;
		visibility: hidden;
	}

	fieldset {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px 15px 15px;

		legend {
			flex-basis: 100%;
			padding-top: 10px;
		}

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

		&.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;
}

.edd-from-to-wrapper {
	display: flex;

	input {
		width: 105px;
		margin: 0;
		position: relative;
		z-index: 1;
	}

	input[name*="start"],
	input[name="filter_from"] {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	input[name*="end"],
	input[name="filter_to"] {
		margin-left: -1px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	input:focus {
		z-index: 2;
		position: relative;
	}
}
