@use "~admin-stylesheets/colors";

.nelio-content-status {
	border-bottom: 1px solid colors.$layout-colors__border--is-subtle;
	display: flex;
	color: #50575e;
	cursor: grab;

	&__handler {
		align-content: center;
	}

	&__content {
		padding: 8px 10px;
		flex-grow: 1;
	}

	&__header {
		align-items: center;
		display: flex;
		gap: 5px;
	}

	&__icon {
		width: 24px;
		height: 24px;

		svg {
			width: 24px;
			height: 24px;
		}
	}

	&__name {
		flex-grow: 1;
		font-weight: 700;
		font-size: 14px;

		&--link {
			color: var(--wp-admin-theme-color, #3858e9) !important;
			text-decoration: none !important;
			font-weight: 700 !important;
			font-size: 14px !important;

			&:hover,
			&:active {
				color: #135e96 !important;
			}
		}

		&--core {
			color: #50575e;
		}
	}

	&__main-color {
		transform: translateX(5px);
	}

	&__actions {
		color: #a7aaad;
		font-size: 13px;
		padding: 2px 0 0;
		visibility: hidden;
	}

	&:hover &__actions {
		visibility: visible;
	}

	&--is-dragging {
		background: colors.$layout-colors__background--is-emphasized;

		> * {
			opacity: 0;
		}
	}

	&-list:not(#{&}-list--is-dragging) &:hover {
		background: colors.$layout-colors__background--is-emphasized;

		.nelio-content-status__actions {
			flex-basis: min-content;
			overflow: unset;
			padding-inline-end: 4px;
		}
	}
}