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

// Following styles are core styling that are duplicated here for when this is run as a separate module.
// Hides the "Star" icon from the PanelBody header.
.interface-complementary-area__pin-unpin-item {
	display: none !important;
}

// Moves the PanelBody header close icon to its proper spot.
.interface-complementary-area-header .components-button.has-icon {
	padding: 6px 13px;
}

// Following styles specific to the Site Content sidebar:
.content-management {
	.content-management__panel {
		position: relative;

		& .components-panel__body-toggle:focus {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
		}

		&.is-opened {
			padding: 0;

			.components-panel__body-title {
				margin: 0;
			}
		}

		// Hide actions button when a row is in renaming mode
		&.is-renaming {
			.content-management__panel__row:not(.is-renaming),
			.content-management__add-new-button {
				opacity: 0.5;
				pointer-events: none;
			}

			.content-management__panel__actions__button {
				display: none !important;
			}

			& span[contenteditable="true"] {
				color: $godaddy-everyday-blue-500;
			}

			.content-management__panel__rename-action button {
				color: $godaddy-everyday-blue-500;
			}
		}

		.content-management__panel__row {
			border-left: 3px solid transparent;
			margin-top: 0;
			position: relative;

			&.current {
				background-color: rgba(245, 245, 245, 0.5);
				border-left-color: $godaddy-everyday-blue-500;

				.content-management__panel__actions__button {
					opacity: 100;
				}
			}

			& .content-management__panel__actions .components-button {

				&:focus {
					box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
				}

				&:hover {
					color: $godaddy-everyday-blue-500 !important;
				}

				&[aria-expanded="true"] {
					color: $godaddy-everyday-blue-500;
				}
			}

			&.is-renaming {
				background-color: #e8f7f7;
				color: $godaddy-everyday-blue-500;

				.content-management__panel__button span[contenteditable="true"] {
					color: $godaddy-everyday-blue-500;
				}
			}

			&:not(.is-renaming):hover,
			&:not(.is-renaming) button:focus {
				background-color: rgba(245, 245, 245, 0.75);

				.content-management__panel__actions__button,
				+ .content-management__panel__actions .content-management__panel__actions__button {
					opacity: 100;
				}
			}

			.content-management__panel__actions .content-management__panel__actions__button:focus,
			.content-management__panel__actions .content-management__panel__actions__button.is-open {
				opacity: 100;
			}

			&:last-of-type {
				margin-bottom: 15px;
			}
		}

		.content-management__panel__button.is-link {
			border: 0;
			box-shadow: none;
			color: $gray-900 !important;
			display: flex;
			font-size: 14px;
			font-weight: 400;
			padding: 9px 10px;
			text-decoration: none;
			transition: border-left-color 0.2s;
			width: 100%;

			&:active:not(:disabled),
			&:hover:not(:disabled) {
				color: var(--wp-admin-theme-color);
			}

			& > svg {
				flex: 0 0 24px;
				margin-right: 6px;
			}

			& > span {
				display: inline-block;
				flex-grow: 1;
				padding-right: 56px;

				&[contenteditable="true"] {
					color: var(--wp-admin-theme-color);
					font-weight: 500;

					&:hover {
						cursor: text;
					}
				}

				&:focus-visible {
					outline: 0;
				}
			}
		}

		.content-management__panel__actions__button:hover svg {
			fill: var(--wp-admin-theme-color);
		}

		.content-management__panel__actions {
			position: absolute;
			right: 8px;
			top: 4px;

			&__button {
				opacity: 0;

				&.is-open {
					display: block;
				}

				.components-dropdown-menu__toggle:hover > svg > path {
					fill: var(--wp-admin-theme-color);
				}
			}
		}

		.content-management__panel__rename-actions {
			position: absolute;
			right: 9px;

			& button {
				color: $godaddy-everyday-blue-500;
			}
		}

		.content-management__panel__rename-action {
			justify-content: center;
			min-width: 36px;
			padding: 5px;

			&--confirm {
				color: var(--wp-admin-theme-color);
			}

			&--cancel {
				color: var(--reliable-red-400);
			}
		}

		.content-management__panel__separator {
			color: $gray-600;
			font-weight: 300;
			margin: 0;
			padding: 10px 18px;
			position: relative;

			&::before {
				background-color: $gray-100;
				content: "";
				display: block;
				height: 1px;
				left: 18px;
				position: absolute;
				right: 18px;
				top: 50%;
			}

			& > span {
				background-color: #fff;
				display: inline-block;
				padding-right: 10px;
				position: relative;
			}
		}
	}

	.content-management__add-new-button {
		position: absolute;
		right: 40px;
		top: 6px;

		&:hover,
		&:focus {
			cursor: pointer;

			span {
				background-color: var(--wp-admin-theme-color);
			}

			svg {
				color: var(--wp-admin-theme-color-darker-10);
			}
		}

		svg {
			fill: var(--wp-admin-theme-color);
		}
	}
}

.components-button.is-destructive:active:not(:disabled) {
	background: unset;
}

.content-management-actions {
	&__item {
		&.is-destructive {
			box-shadow: none !important;
			color: var(--reliable-red-400) !important;

			&:hover > svg > path,
			> svg > path {
				fill: var(--reliable-red-400);
			}
		}

		&.is-confirming {
			color: var(--wp-admin-theme-color);

			&:hover > svg > path,
			> svg > path {
				fill: var(--wp-admin-theme-color);
			}
		}

		svg {
			display: inline-block;
			margin-right: 0.75em;
			width: 20px;
		}

		&:hover,
		&:focus:not(:disabled) {
			box-shadow: none !important;
			outline: 0 !important;
		}

		&:hover {
			> svg > path {
				fill: var(--wp-admin-theme-color);
			}
		}
	}

	.components-popover__content {
		border-color: $gray-900;
		border-radius: 2px;
		margin-right: -18px !important;
		margin-top: -10px;
		min-width: 190px;
		padding: 5px 0;

		& > div {
			padding: 0 !important;
		}

		.components-menu-item__item {
			display: block;
			padding-right: 45px;
			text-align: left;
			width: 100%;
		}

		.content-management-actions__item {

			&:hover {
				color: $godaddy-everyday-blue-500;
			}

			padding: 12px 20px;

			svg {
				float: right;
				margin: -4px -45px 0 0;
			}
		}
	}
}
