// ---------------------------------------------------------------------------------------------------------------------
// components
// ---------------------------------------------------------------------------------------------------------------------

	.loader {
		display: block;
		width: 16px;
		height: 16px;
		background-image: url('../images/ajax-loader-grey.gif');
		background-repeat: no-repeat;
		transition: opacity 0.1s;
		opacity: 0;

		.loading & {
			opacity: 1;
		}
	}


	.controller-list {

		// fade controller list when help shows
		transition: opacity 0.3s;
		#app[data-mode="help"] &{
			opacity: 0.2;
		}

		#app[data-mode="help"] &:hover{
			opacity:1;
		}

		// comments
        #app.show-comments & p.comment {
	        margin-bottom: 1em;
            height:17px;
        }

        p.comment {
            transition: 0.5s all;
	        margin-bottom: 0;
            height:0;
        }

		// folder elements
		li.folder {
			padding: 3px 5px;
			border-bottom: 1px dashed #EEE;
			margin-bottom: 4px;
		}

		#methods li.folder:first-child,
		#controllers li.folder:first-child {
			margin-top:-28px !important;
		}

		// list elements
		li {

			// remove focus
			a:focus {
				background: inherit;
			}

			// errors
			&.error > span,
			> a {
				padding: 4px 9px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			&.active.error a {
				background: lighten(#ecf0f1, 2%);
				color: $brand-warning;
			}
			&.active.error a:hover {
				background: #ecf0f1;
			}

			// folders
			&.folder,
			p {
				padding-left: 9px;
				font-size: 0.8em;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #ccc;
				cursor: default;
				//margin-bottom:0.3em;
			}

			&.folder {
				margin-top:10px;
				margin-left:-20px;

				.name{
					color:#999;
				}
			}

			// icons
			&.icon {
				color:#CCC;
			}

			&.icon:before{
				position: absolute;
				top: 4px;
				left: -12px;
				font-family: FontAwesome;
				text-align: center;
				font-weight: 400;
				transition: left 0.3s;
			}

			&.icon:hover:before,
			&.active.icon:before {
				left:-18px;
				transition: left 0.2s;
			}

			// icons & styling
			&.error:before{
				content: "\f071";
				color: $brand-warning;
			}

			&.favourite:before{
				content: "\f005";
				color: #FFCC00;
			}

			&.defer:before{
				content: "\f017";
			}

			&.warn:before{
				content: "\f12a";
				color: #FF0000;
			}

			&.archived a{
				color:#CCC;
			}

		}

		a.controller span.divider{

			position: relative;
			display: inline-block;
			padding:0 3px;
			color:#CCC;

			li.active &{
				opacity: 0.3;
			}
		}

		a.method.error{
			color:red;
		}

	}