/**
 * Styles for menu layout control
 *
 * @since 1.5
 */
#fdm-menu-organizer > *,
#fdm-menu-organizer > *:before,
#fdm-menu-organizer > *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#fdm-menu-organizer {
	border: 1px solid #ddd;
}

.fdm-column {
	float: left;
	width: 33%;
	border-right: 1px solid #ddd;

	&:first-child {
		background: #fafafa;
	}

	&:nth-child(3) {
		width: 34%;
		border-right: none;
	}

	h3 {
		background-color: #fafafa;
		border-bottom: 1px solid #ddd;
		margin: 0;
		padding: 1em;
		font-size: 1em;
		text-align: center;
	}

	ul {
		margin: 0;
		padding: 1em;
		height: 300px;
		overflow: auto;

		> li {
			position: relative;
		}
	}

	.fdm-title {
		display: block;
		position: relative;
		padding: 0.25em 3em 0.25em 3.5em;
		background: #fff;
		line-height: 2em;
		text-decoration: none;
		border: 1px solid #ddd;
		cursor: pointer;
		text-overflow: ellipsis;
		overflow-x: hidden;
		white-space: nowrap;

		&:hover,
		&:focus {
			border-color: #333;
		}
	}

	.fdm-edit-section-name,
	.fdm-term-count {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 2.5em;
		background: #eee;
		border-right: 1px solid #ddd;
		text-align: center;
		line-height: 2.5em;
	}

	.fdm-term-count {
		color: #888;
	}

	.fdm-edit-section-name {
		left: auto;
		top: 1px;
		right: 1px;
		bottom: 1px;
		border-right: none;
		border-left: 1px solid #ddd;
		text-decoration: none;

		&:before {
			display: inline-block;
			content: "\f464";
		    width: 20px;
		    height: 20px;
		    font-size: 20px;
		    line-height: 1.5em;
		    font-family: dashicons;
		    text-decoration: inherit;
		    font-weight: normal;
		    font-style: normal;
		    vertical-align: top;
		    text-align: center;
		    -webkit-transition: color .1s ease-in 0;
		    transition: color .1s ease-in 0;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		}

		&:hover,
		&:focus {
			background: #0073aa;
			color: #fff;
		}
	}

	.fdm-no-sections {
		padding: 1em;
		height: 300px;
		background: #fff;
		color: #777;
	}
}

#fdm-menu-sections-list .fdm-edit-section-name {
	display: none;
}

.fdm-menu-sections-placeholder {
   display: block;
   width: 100%;
   height: 3em;
   border: 1px dashed #bbb;
   background: #fafafa;
}

#fdm-menu-organizer > .description {
	clear: both;
	margin: 0;
	padding: 1em;
	background: #fafafa;
	border-top: 1px solid #ddd;
}

// Modal for editing menu section titles
#fdm-menu-section-modal {

	label {
		display: inline-block;
		margin-bottom: 0.5em;
		font-weight: bold;
	}

	.description {
		margin: 1em 0 2em;
	}
}