@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

// custom properties for a8c-for-agencies
:root {
	// border-radius
	--a4a-corners-sharp: 0;
	--a4a-corners-soft: 4px;

	--color-surface-backdrop: #021a23;
	--color-light-backdrop: var(--studio-white);

	--color-border-light: var(--studio-white);

	--color-text-gray: "#333";
	--color-text-white: var(--studio-white);
	--color-text-black: var(--studio-black);
	--wp-components-color-accent: var(--studio-automattic-blue-50);

	// FIXME: Need to move this colors to a color scheme file
	--color-scary-0: var(--studio-red-0);
	--color-scary-5: var(--studio-red-5);
	--color-scary-40: var(--studio-red-40);
	--color-scary-50: var(--studio-red-50);
	--color-scary-60: var(--studio-red-60);
	--color-scary-70: var(--studio-red-70);

	--color-primary: var(--studio-automattic-blue-50);
	--color-primary-dark: var(--studio-automattic-blue-70);
	--color-primary-light: var(--studio-automattic-blue-30);
	--color-primary-0: var(--studio-automattic-blue-0);
	--color-primary-5: var(--studio-automattic-blue-5);
	--color-primary-10: var(--studio-automattic-blue-10);
	--color-primary-20: var(--studio-automattic-blue-20);
	--color-primary-30: var(--studio-automattic-blue-30);
	--color-primary-40: var(--studio-automattic-blue-40);
	--color-primary-50: var(--studio-automattic-blue-50);
	--color-primary-60: var(--studio-automattic-blue-60);
	--color-primary-70: var(--studio-automattic-blue-70);
	--color-primary-80: var(--studio-automattic-blue-80);
	--color-primary-90: var(--studio-automattic-blue-90);
	--color-primary-100: var(--studio-automattic-blue-100);
	--color-accent: var(--studio-gray-50);
	--color-accent-dark: var(--studio-gray-70);
	--color-accent-light: var(--studio-gray-30);
	--color-accent-0: var(--studio-gray-0);
	--color-accent-5: var(--studio-gray-5);
	--color-accent-10: var(--studio-gray-10);
	--color-accent-20: var(--studio-gray-20);
	--color-accent-30: var(--studio-gray-30);
	--color-accent-40: var(--studio-gray-40);
	--color-accent-50: var(--studio-gray-50);
	--color-accent-60: var(--studio-gray-60);
	--color-accent-70: var(--studio-gray-70);
	--color-accent-80: var(--studio-gray-80);
	--color-accent-90: var(--studio-gray-90);
	--color-accent-100: var(--studio-gray-100);
	--color-jetpack: var(--studio-jetpack-green);
	--color-jetpack-dark: var(--studio-jetpack-green-70);
	--color-jetpack-light: var(--studio-jetpack-green-30);
	--color-jetpack-0: var(--studio-jetpack-green-0);
	--color-jetpack-5: var(--studio-jetpack-green-5);
	--color-jetpack-10: var(--studio-jetpack-green-10);
	--color-jetpack-20: var(--studio-jetpack-green-20);
	--color-jetpack-30: var(--studio-jetpack-green-30);
	--color-jetpack-40: var(--studio-jetpack-green-40);
	--color-jetpack-50: var(--studio-jetpack-green-50);
	--color-jetpack-60: var(--studio-jetpack-green-60);
	--color-jetpack-70: var(--studio-jetpack-green-70);
	--color-jetpack-80: var(--studio-jetpack-green-80);
	--color-jetpack-90: var(--studio-jetpack-green-90);
	--color-jetpack-100: var(--studio-jetpack-green-100);
	--color-orange-40: var(--studio-orange-40);

	--color-yellow-0: var(--studio-yellow-0);
	--color-yellow-20: var(--studio-yellow-20);
	--color-yellow-50: var(--studio-yellow-50);

	// Brand colors
	--color-klaviyo: #b84f0a;
	--color-woo: var(--studio-woocommerce-purple-60);
	--color-vip: #9E6C29;

	// A4A Brand Colors
	--a4a-brand-blue-80: #12304a;
}

.theme-a8c-for-agencies {

	.components-button,
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;

		@include heading-medium;

		box-sizing: border-box;
		border-radius: 4px;

		border-color: var(--color-accent-5);
		fill: var(--color-accent-100);

		&:hover,
		&:focus-visible {
			background-color: var(--color-accent-0);
		}

		&.is-borderless.is-primary.is-active,
		&.is-borderless.is-primary:active,
		&.is-borderless.is-primary:focus,
		&.is-borderless.is-primary:hover {
			color: var(--color-primary-60);
		}
	}

	.button.split-button__toggle {
		border-radius: 0 4px 4px 0;

		@include breakpoint-deprecated("<660px") {
			border-radius: 4px;
		}
	}

	.button.split-button__main {
		border-radius: 4px 0 0 4px;
	}

	.components-button.is-primary:disabled {
		background-color: var(--color-primary-50);
	}

	.components-button.is-link {
		&:hover {
			background-color: transparent;
		}
		&:focus-visible,
		&:focus {
			color: inherit;
		}
	}

	.components-button.is-primary,
	.button.is-primary {
		&:not( :disabled ),
		&:focus:not(:disabled) {
			background-color: var(--color-primary-50);
			border-color: var(--color-primary-50);
			fill: var(--color-text-inverted);
			color: var(--color-text-inverted);
		}

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled) {
			background-color: var(--color-primary-70);
			border-color: var(--color-primary-70);
			fill: var(--color-text-inverted);
			color: var(--color-text-inverted);
			box-shadow: none;
		}
	}

	.components-external-link {
		color: var(--color-primary-50);
	}

	.components-button.is-destructive:not(:disabled),
	.button.is-scary:not(:disabled) {
		color: var(--color-scary-50);
		border-color: var(--color-scary-50);

		&:hover,
		&:focus-visible {
			background-color: var(--color-scary-0);
			border-color: var(--color-scary-60);
			color: var(--color-scary-60);
		}

	}

	.components-button.is-primary.is-destructive,
	.button.is-primary.is-scary {
		background-color: var(--color-scary-50);
		color: var(--color-text-inverted);

		&:hover,
		&:focus-visible {
			background-color: var(--color-scary-60);
			color: var(--color-text-inverted);
		}
	}

	.button.is-borderless:focus,
	.button.is-borderless:hover,
	.button.is-borderless {
		background: none;
		color: var(--color-accent-80);

		&.a8c-blue-link {
			color: var(--color-primary-50);
			text-decoration: underline;

			svg {
				fill: var(--color-primary-50);
				margin-inline-start: 4px;
			}
		}
	}

	.button.is-dark,
	.components-button.is-dark {
		background-color: var(--color-accent-100);
		color: var(--color-surface);

		&:hover,
		&:focus-visible {
			background-color: var(--color-accent-100);
			color: var(--color-surface);
		}
	}

	.components-button.is-light {
		background-color: var(--color-text-white);
		color: initial;

		&:focus {
			box-shadow: 0 0 0 2px var(--color-primary-light);
		}

		&.is-secondary, &.is-link {
			color: var(--color-text-white);
			background-color: transparent;
		}

		svg {
			fill: var(--color-text-white);
		}

		&.is-busy {
			color: var(--color-text);

			svg {
				fill: var(--color-text);
			}
		}
	}

	.split-button .button {
		@include heading-medium;
		height: 40px;
	}

	.components-form-toggle.is-checked .components-form-toggle__track {
		background-color: var(--color-primary-50);
		border-color: var(--color-primary-50);
	}

	.components-checkbox-control__input {
		border-radius: 4px;
		border-color: var(--color-neutral-10);
		margin: 0;
	}

	.components-checkbox-control__input-container {
		margin: 0 8px 0 0;
	}

	.components-checkbox-control__input[type="checkbox"]:checked,
	.components-checkbox-control__input[type="checkbox"]:indeterminate {
		background: var(--color-primary-50);
		border-color: var(--color-primary-50);
	}

	.components-checkbox-control__input[type="checkbox"]:focus {
		box-shadow: none;
		outline: none;

		&:not(.components-checkbox-control__input[type="checkbox"]:checked) {
			border-color: var(--color-neutral-10);
		}
	}

	.components-checkbox-control__input[type="checkbox"]:focus-visible {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 2px var(--color-primary-10);
		outline: none;
	}

	.components-button.is-tertiary {
		color: var(--color-primary-60);
	}

	.components-base-control__field {
		margin: 0;
	}

	.components-form-token-field__input-container,
	.components-text-control__input,
	.components-textarea-control__input {
		background-color: var(--color-surface);
		border: 1px solid var(--color-neutral-10);
		border-radius: 2px;
		box-sizing: border-box;
		color: var(--color-neutral-70);
		@include body-medium;
		margin: 0;
		padding: 8px 12px;
		transition: all 0.15s ease-in-out;
		width: 100%;
		min-height: 36px;

		:not(.components-form-token-field__input-container) {

			&.is-active,
			&:focus {
				border-color: var(--color-primary);
				box-shadow: 0 0 0 2px var(--color-primary-5);
				outline: none;
			}
		}
	}

	.components-form-token-field__input-container {
		position: relative;

		&.is-active,
		&:focus {
			box-shadow: none;
			outline: none;
			border-color: var(--color-primary-50);
		}

		.components-form-token-field__suggestions-list {
			box-sizing: border-box;
			position: absolute;
			margin-block-start: 7px;
			margin-inline-start: -13px;
			background-color: var(--color-surface);
			border: 1px solid var(--color-neutral-10);
			z-index: 10;
			box-shadow: none;
			width: calc(100% + 2px);
			border-block-start-color: var(--color-primary-50);
		}

		.components-form-token-field__token,
		.components-form-token-field__token-text,
		.components-form-token-field__remove-token.components-button {
			background-color: var(--color-neutral-5);
			border-radius: 4px;
		}

		>* {
			margin: 0;
			padding: 0;
		}
	}

	.search {

		&,
		& > *,
		input[type="search"] {
			border-radius: 4px;
		}
	}

	// Masterbar
	@media only screen and (min-width: 782px) {
		--masterbar-height: 46px;
	}

	.button[disabled],
	.button:disabled,
	.button.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	.global-notices {
		z-index: 100001;
	}
}

// New navigation will not include a masterbar
.theme-a8c-for-agencies .layout.has-no-masterbar {
	/* We are ignoring these lines because without the
	// px value the calc function does not work as expected */
	/* stylelint-disable-next-line length-zero-no-unit */
	--masterbar-height: 0px;

	.layout__content {
		padding: 16px;
	}

	@include breakpoint-deprecated(">660px") {
		padding-block-start: 0;

		.layout__content {
			padding: 16px 16px 16px calc(var(--sidebar-width-max));
		}
	}
}

// Various screens dont use a sidebar.
.theme-a8c-for-agencies .layout.has-no-sidebar {
	.layout__content {
		padding-left: 16px;
	}
}

.theme-a8c-for-agencies .layout__secondary {
	border-inline-end: initial;

	// Allow visible overflow, so the profile dropdown menu can be displayed
	overflow: initial;

	// Make the selected-site navigation full-height
	.my-sites__navigation {
		height: 100%;
	}

	.site-selector {
		top: 80px;

		.site-selector__sites {
			border-top: initial;
		}

		.all-sites {
			border-bottom: initial;

			// Remove the long-content fade if All Sites is selected
			.all-sites__title::after {
				display: none;
			}
		}

		.all-sites,
		.site {
			margin: 4px 4px 0 4px;

			&.is-selected,
			&:hover {
				border-radius: 4px;
			}
		}
	}
}

.theme-a8c-for-agencies .current-section {
	margin: 0;
}

.theme-a8c-for-agencies .dialog.card {
	border-radius: 4px;

	.dialog__action-buttons {
		border: none;
		background: var(--color-surface);
	}
}

// Universal Text Styles
html {
	h2 {
		@include heading-2x-large;
	}

	h3 {
		@include heading-x-large;
	}

	p {
		@include body-large;

		@include breakpoint-deprecated(">660px") {
			@include body-x-large;
		}
	}
}

.layout__secondary {
	border-inline-end: 1px solid var(--color-sidebar-border);
}

.layout.focus-content .layout__secondary {
	@media only screen and (max-width: 782px) and (min-width: 660px) {
		transform: none;
		padding: 0;
	}
}

.site-selector .site-selector__actions {
	padding: 16px;
}

.popover {
	@include body-medium;
	border-radius: 4px;

	.popover__arrow {
		display: none;
	}


	.popover__inner {
		border-radius: 4px;
	}

	.popover__menu {
		padding: 8px;
	}

	.popover__menu-item {
		display: flex;
		align-items: center;
		border: none;
		outline: none;
		margin-block: 0;
		min-height: 40px;
		box-sizing: border-box;
		border-radius: 4px;
		gap: 8px;
	}

	.popover__menu-item .gridicon {
		margin: 0;
	}

	button.popover__menu-item:hover,
	button.popover__menu-item:focus {
		background: var(--wp-components-color-accent);
		color: var(--color-text-inverted);

		.gridicon {
			fill: var(--color-text-inverted);
		}
	}

	.popover__menu-item.is-destructive {
		color: var(--color-scary-50);

		.gridicon {
			fill: var(--color-error-50);
		}
	}
}

.popover.tooltip.gray-tooltip {
	.popover__arrow {
		&::before {
			border-bottom-color: var(--color-accent-60);
			inset-block-start: 1px;
		}
	}

	.popover__inner {
		background: var(--color-accent-60);
		color: var(--color-text-white);
		padding: 10px 12px;
		border: none;
	}
}

.redesigned-a8c-table {
	thead .dataviews-view-table__row th {
		@include heading-small;
		color: var(--color-accent-80);
	}

	.dataviews-view-table tr {

		td,
		th {
			.action-button {
				display: flex;
				justify-content: flex-end;
				width: 100%;
				padding-inline-end: 12px;

				.gridicon {
					margin-top: 0;
					top: 0;
				}
			}

			&:first-child {
				text-align: left;
				padding-inline-start: 16px;
			}
		}
	}


	&.search-enabled {
		.dataviews__view-actions {
			padding: 1px;
		}
	}

	&.show-overflow-overlay {
		overflow-y: auto;
		margin-block: 24px;

		&::-webkit-scrollbar {
			width: 4px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(155, 155, 155, 0.5);
			border-radius: 4px;
			border: transparent;
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 80px;
			width: 100%;
			height: 5%;
			display: inline-block;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%);
			transition: opacity 0.3s ease-out;
		}

		.dataviews-view-table {
			padding-block-end: 80px;
			margin: 0 0 32px;

			tr {
				border-top: none;
			}
		}
	}

	&.bordered {
		.dataviews-view-table {
			border: 1px solid var(--color-neutral-5);
			border-radius: 2px;
		}
	}

}



.full-width-layout-with-table {
	.hosting-dashboard-layout__body-wrapper {
		max-width: 100%;
		padding-inline: 0;
	}

	.hosting-dashboard-layout__top-wrapper > * {
		max-width: none;
	}

	.redesigned-a8c-table .dataviews-view-table tr {

		td:first-child,
		th:first-child {
			padding-inline-start: 16px;

			@include breakpoint-deprecated(">660px") {
				padding-inline-start: 64px;
			}
		}

		td:last-child,
		th:last-child {
			padding-inline-end: 16px;

			@include breakpoint-deprecated(">660px") {
				padding-inline-end: 64px;
			}
		}
	}
}

.is-opacity-50 {
	opacity: 0.5;
}
