@use "variables";

.postbox-container .cmb-type-ctct-forms-list-selection .cmb-th + .cmb-td {
	width: 100%;
}

.cmb-type-ctct-forms-list-selection {
  .attached-posts-wrap {
	display: inline-block;
	width: 100%;

	.attached {
	  float: right;

	  li {
		padding-left: 35px;
	  }
	}

	.retrieved {
	  li {
		&.added {
		  opacity: .5;

		  &:hover {
			background: variables.$color-white;
			cursor: initial;

			.add-remove {
			  background-position: 0 -22px;
			}
		  }
		}
	  }
	}
  }

  .column-wrap {
	float: left;
	width: 45%;
  }

  .retrieved-wrap {
	margin-right: 10%;
  }

  .attached-posts-section {
	margin-bottom: 5px;
  }

  .search-wrap .regular-text {
	width: 100%;
	margin: 0 0 7px 0;
  }

  .connected {
	background: variables.$color-connected;
	cursor: pointer;
	height: 300px;
	overflow-y: scroll;
	padding: 0;
	width: 100%;

	&.attached {
	  cursor: grab;
	}

	li {
	  border-bottom: 1px solid variables.$color-list-item;
	  margin: 0;
	  padding: 10px 40px 10px 10px;
	  position: relative;

	  &.odd {
		background-color: variables.$color-list-item-odd;
	  }
	  &:hover {
		background: variables.$color-list-item-hover;
	  }

	  .add-remove,
	  .sort {
		display: block;
		height: 17px;
		margin-top: -8px;
		position: absolute;
		right: 10px;
		top: 50%;
		width: 22px;
	  }

	  .add-remove {
		right: 10px;

		&:hover {
		  cursor: pointer;
		}
	  }

	  .sort {
		left: 10px;
	  }
	}

	&.retrieved li .sort {
	  display: none;
	}
  }

  ul.hide-selected li.added {
	display: none;
  }

  .cmb2-attached-posts-search-button span {
	color: variables.$color-med-gray;
	margin: .2em -.2em 0 1px;
  }
}