/**
 * Style  custom to the CMSMain admin interface. CMSMain extends the built in
 * SilverStripe admin section styles. As much as possible we want to use those
 * built in styles. If anything in this file can be implemented in a generic
 * way then it should be include in the admin scss files.
 *
 * @package cms
 */

/** ------------------------------------------------------------------
 * Page History Section.
 * ----------------------------------------------------------------- */
#cms-page-history-versions {
	tr {
		&.loading {
			color: #999;
			
			td {
				
				&:hover {
					cursor: none;
				}
			}
		}
	}
	td {
		&:hover {
			cursor: pointer;
		}
	}
}

.CMSPageHistoryController {
	ins {
		background-color: #DFD;
		padding: 2px;
		text-decoration: none;
	}

	del {
		background-color: #FDD;
		padding: 2px;
		color: darken(#FDD, 30%);
	}
}

/** --------------------------------------------
 * Tree View (collapsed for sidebar)
 * -------------------------------------------- */
#cms-content-treeview, #cms-content-listview {
	.cms-tree-expand-trigger {
		display: none; // Don't show trigger in expanded mode
	}
}

/**
 * DEPRECATED:
 * .cms-content-tools will be removed in 4.0
 * Use .cms-content-filters instead.
 *
 * Hide certain elements when shown in "sidebar mode"
 */
.cms-content-tools {
	#cms-content-treeview {
		.cms-content-toolbar {
			border-bottom: none;
			box-shadow: none;
			margin-bottom: 0;
		}
		.cms-tree-expand-trigger {
			display: block;
			float: left;
			margin: 0 0 2px 0;
			span.ui-button-text {
					padding-right: 8px;
			}
		}

		.cms-tree {
			// Hide badges and drag icons to save space
			.badge {
				display: none;
			}

			// Show badge on hovered node
			a:hover > .text > .badge, .jstree-clicked > .text > .badge {
				display: inline-block;
			}
		}
	}
}

/** ------------------------------------------------------------------
 * URLSegment field
 * ----------------------------------------------------------------- */
.field.urlsegment {

	&.loading {
		background: url(../images/loading.gif) no-repeat 162px 8px;
	}

	.preview {
		padding-top: 8px;
		display: inline-block;
	}

	input.text {
		width: 250px; // ensure there's enough room for buttons
	}

	input.text, .cancel, .update, .edit {
		margin-right: 8px;
	}

	.help {
		margin-left: 0;
	}

	.edit-holder {
		display: none;
	}
}

#Form_EditForm #Title .update {
	margin-left: 7px;
}