.vpf-component-sortable,
.vpf-component-sortable-disabled {
	padding: 4px 0;
	margin: 0;
	overflow: hidden;
	list-style: none;
	border: 1px solid #7e8993;
	border-radius: 4px;
}

.vpf-dragging-has-disabled-options {
	padding-bottom: 0;
	border-bottom: none;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.vpf-component-sortable > li {
	position: relative;
	display: flex;
	align-items: center;
	padding: 3px 8px;
	margin: 0;
	list-style: none;

	&:hover {
		background-color: #f7f7f7;
	}

	> span {
		display: inline-flex;
		padding: 4px 0;
		margin: 0;
		margin-right: 6px;
		vertical-align: middle;
		cursor: grab;
		border-radius: 3px;

		&:hover {
			background-color: #e1e1e1;
		}

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

	&:hover .vpf-component-sortable-delete {
		opacity: 1;
	}

	&.vpf-component-sortable-item-dragging {
		z-index: 1;
		background-color: #f7f7f7;

		.vpf-component-sortable-delete {
			opacity: 0;
		}
	}
}

.vpf-component-sortable + ul.vpf-component-sortable-disabled {
	padding: 0 0 4px;
	margin: 0;
	list-style: none;
	background-color: #f6f6f6;
	border: 1px solid #7e8993;
	border-top-color: #dcdcdc;
	border-radius: 0 0 4px 4px;

	> li {
		display: flex;
		align-items: center;
		height: 34px;
		padding: 3px 8px;
		margin: 0;
		color: #0000007a;
		list-style: none;

		&:hover {
			background-color: #f7f7f7;
		}
	}
}

.vpf-component-sortable-delete,
.vpf-component-sortable-add {
	display: inline-flex;
	height: 28px;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 3px;

	&:hover {
		background-color: #e1e1e1;
	}

	svg {
		width: 11px;
		height: auto;
	}
}

.vpf-component-sortable-delete {
	padding: 0 5px;
	margin: 0;
	margin-left: auto;
	opacity: 0;

	svg {
		width: 9px;
	}
}

.vpf-component-sortable-add {
	padding: 0 4px;
	margin-right: 7px;
	color: #000;
}