.adcmdr-chart-contain {
	position: relative;
}

.adcmdr-contain {
	background: #fff;
	//border: 1px solid $wp-border-color;
	border-radius: 4px;
	box-shadow: $box-shadow;
	padding: $gutter-width;
	margin: $gutter-width auto;
}

.adcmdr-highlight {
	box-shadow: $box-shadow-highlight !important;
}

.adcmdr-error {
	box-shadow: $box-shadow-error !important;
}

.adcmdr-contain-full {
	margin: $gutter-width auto;

	.gridjs-wrapper {
		border-radius: 4px 4px 0 0;
		box-shadow: $box-shadow;
	}

	.gridjs-footer {
		border-radius: 0 0 4px 4px;
		box-shadow: $box-shadow;
	}
}

.adcmdr-footnote {
	font-style: italic;
	font-weight: normal;
	font-size: 0.75rem;
	margin: 4px;
	color: lighten(#000, 45%);
}

.adcmdr-filter-form-content {
	background: rgba(#fff, 0.9);
	margin: 0 0 0 -10px;
	padding: $gutter-width-half;
	position: relative;
	z-index: 1;

	@media only screen and (min-width: $adm-breakpoint-md) {
		margin-left: -20px;
		position: sticky;
		padding: $gutter-width-half $gutter-width;
		top: 10px;
	}

	.admin-bar & {
		@media only screen and (min-width: $adm-breakpoint-md) {
			top: 32px;
		}
	}
}

.adcmdr-filter-custom-dates,
.adcmdr-filter-bar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--adcmdr-gutter-width);

	select,
	input[type="text"],
	input[type="date"],
	.button {
		border-color: $wp-border-color;
		border-radius: 4px;
		font-size: 13px;
		margin: 0;
		min-height: 34px;
	}

	select {
		padding: 0 24px 0 10px;
	}

	input[type="submit"] {
		border-color: transparent;
		margin-left: auto;
		padding: 0 16px;
	}

	.adcmdr-filter-submit {
		margin-left: auto;
	}
}

.adcmdr-filter-types {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--adcmdr-gutter-width-half);
}

.adcmdr-filter-custom-dates {
	align-items: center;
	gap: var(--adcmdr-gutter-width-half);
	margin-bottom: var(--adcmdr-gutter-width-half);
}

.adcmdr-filters-toggle-contain {
	padding-left: var(--adcmdr-gutter-width-half);
	border-left: 1px solid $wp-border-color;
}

.adcmdr-filters-toggle {
	&.button {
		align-items: center;
		background: #fff
			url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E")
			no-repeat right 8px top 55%;
		background-size: 16px 16px;
		border-color: $wp-border-color;
		color: $wp-border-color-dark;
		line-height: 2.71428571;
		display: inline-flex;
		gap: 7px;
		padding: 0 31px 0 12px;

		&:hover,
		&:focus,
		&:active {
			background: #fff
				url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E")
				no-repeat right 8px top 55%;
			background-size: 16px 16px;
			border-color: $wp-border-color-dark;
			color: $wp-border-color-dark;
		}
	}
}

.adcmdr-filters-count {
	display: inline-flex;
	background: $primary;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	min-width: 14px;
	min-height: 14px;
	padding: 2px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

/**
 * Pill-style chips for the report filters, scoped so chips elsewhere in the
 * admin keep their existing style.
 */
.adcmdr-filter-bar-chips,
.adcmdr-filter-panel {
	.adcmdr-remove {
		background: rgba($primary, 0.08);
		border-color: rgba($primary, 0.35);
		border-radius: 999px;
		color: darken($primary, 6%);
		font-size: 11.5px;
		gap: 5px;
		padding: 6px 12px;

		.dashicons {
			color: currentColor;
			font-size: 14px;
			height: 14px;
			line-height: 1;
			opacity: 0.55;
			width: 14px;
		}

		&:hover {
			border-color: rgba($primary, 0.6);

			.dashicons {
				color: $danger;
				opacity: 1;
			}
		}
	}
}

.adcmdr-filter-bar-chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-self: center;
	gap: 4px;
	padding: 0;
	margin: 0;
	list-style: none;

	.adcmdr-bar-chip__text {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		line-height: 1.25;
		text-align: left;
	}

	.adcmdr-bar-chip__type {
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.02em;
		opacity: 0.8;
	}
}

.adcmdr-filter-panel {
	background: #fff;
	border: 1px solid $wp-border-color;
	box-shadow: $box-shadow;
	left: 0;
	padding: 18px 20px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 5;

	&[hidden] {
		display: none;
	}

	label {
		font-size: 12.5px;
	}

	.adcmdr-mode-restrict--custom {
		margin-bottom: $gutter-width-half;
	}

	.adcmdr-remove {
		padding: 3px 8px;
	}
}

.adcmdr-filter-panel__grid {
	display: grid;
	gap: var(--adcmdr-gutter-width);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	input[type="text"] {
		width: 100%;
	}

	.adcmdr-remove-controls {
		align-self: flex-start;
		flex-wrap: wrap;
		margin-top: 6px;
		row-gap: 4px;
	}

	.adcmdr-filter-field--filter-ads {
		display: block;
	}
}

.wrap:empty + .adcmdr-filter {
	margin-top: -10px;
}

.adcmdr-subtitle-wrap,
.adcmdr-title-wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: $gutter-width;
	margin: $gutter-width 0;

	.adcmdr-filter-field {
		display: flex;
		flex-direction: row;
		align-items: center;
		order: 1;
		gap: 10px;

		label {
			display: inline-block;
			width: auto;
			margin: 0;
		}
	}

	h2 {
		font-size: 23px;
		font-weight: 400;
		margin: 0;
		line-height: 1.3;
		order: 1;
	}

	.notice {
		margin-bottom: 0;
		order: 0;
		width: 100%;
	}
}

.adcmdr-btn-export {
	border: none;
	background: none;
	color: $primary;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.25em;

	&:hover {
		color: $secondary;
	}

	i {
		display: inline-block;
	}

	&:disabled {
		color: $primary;
		opacity: 0.75;
		cursor: not-allowed;
	}
}

.adcmdr-subtitle-wrap {
	margin: 0 0 1em;

	h3 {
		margin: 0;
	}

	span {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5em;
	}
}

.adcmdr-filter-row {
	display: flex;
	flex-direction: row;
	gap: $gutter-width;
	flex-wrap: wrap;
	align-items: flex-start;

	+ .adcmdr-filter-row {
		margin-top: $gutter-width-half;
	}
}

.adcmdr-filter-field {
	&--submit {
		align-self: flex-end;
	}

	&-col {
		@media screen and (min-width: 768px) {
			border-left: 1px solid $wp-border-color;
			padding-left: $gutter-width;
		}
	}

	&--filter-ads {
		display: flex;
		flex-direction: row;
		gap: $gutter-width-half;
		align-items: flex-start;
	}

	label {
		display: block;
		font-weight: 700;
		margin-bottom: 5px;
	}

	input[type="radio"] + label {
		display: inline;
		font-weight: normal;
		margin-right: $gutter-width-half;

		&:last-child {
			margin-right: 0;
		}
	}

	input[type="radio"] {
		margin-top: 1px;
	}
}

.adcmdr-data-table {
	.dashicons {
		opacity: 0.75;
		transition: opacity $speed $ease;
		font-size: 1rem;
		margin-left: 6px;
		text-decoration: none;
		height: auto;
		width: auto;

		&:hover {
			opacity: 1;
		}
	}
}

#adcmdr_tabs {
	border: none;
	background: none;
	font-family: inherit;

	.ui-tabs-nav {
		background: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
		border-top: 1px solid $wp-border-color;
		border-bottom: 1px solid $wp-border-color;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--adcmdr-gutter-width);
		padding: 8px 0;

		@media only screen and (max-width: $adm-breakpoint-md) {
			justify-content: center;
		}

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

		.ui-tabs-tab {
			background: none;
			font-weight: bold;
			margin: 0;
			padding: 0;
			border: none;

			a {
				background: none;
				border-radius: 4px;
				color: $primary;
				display: inline-block;
				padding: $gutter-width-half;
				transition:
					color $speed $ease,
					background $speed $ease;

				&:hover {
					background: #fff;
					color: $primary;
				}
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}
			}

			&.ui-tabs-active {
				a {
					background: $primary;
					color: #fff;
				}
			}
		}
	}

	.ui-widget-content {
		border: none;
		background: none;
	}
}