// --------------------------------------------------------------------------------
// MIXINS
// --------------------------------------------------------------------------------

// --------------------------------------------------------------------------------
// ICON-FONT
//
// Applies basic styles for an icon font icon inserted in scss
// with :after or :before
// --------------------------------------------------------------------------------

@mixin icon-font($font, $code, $size) {
	content:     $code;
	font-family: $font;
	font-size:   $size;
}

// --------------------------------------------------------------------------------
// DROPDOWN BOX
//
// Simple dropdown box which is displayed after clicking on the dropdown-toggle
// Overrides bootstrap styling for this dropdown
// --------------------------------------------------------------------------------

@mixin dropdown-box() {
	.dropdown-menu {
		border-radius: 0;
		box-shadow:    none;
		cursor:        auto;
		position:      relative;
		width:         100%;
		
		.action {
			cursor:  pointer;
			padding: 5px 15px;
			
			&:hover {
				background-color: darken($border-color-light, 5);
			}
		}
	}
}

// --------------------------------------------------------------------------------
// ACTIONS DROPDOWN
//
// Used for main style template actions like (de-)activate, edit, copy or deleting
// --------------------------------------------------------------------------------
@mixin actions-dropdown() {
	.info {
		display:      table-cell;
		float:        none;
		width:        87.6%;
		padding-left: 0;
		
		.date-status {
			color:       #6B6E70;
			font-size:   12px;
			font-weight: bold;
			
			span {
				&.status {
					color:       #337AB7;
					display:     none;
					font-style:  italic;
					font-weight: bold;
				}
			}
		}
	}
	
	.dropdown-icon {
		display:        table-cell;
		float:          none;
		text-align:     center;
		vertical-align: middle;
		
		i {
			&.fa {
				color:      #6B6E70;
				margin-top: -5px;
				
				&.fa-caret-down {
					display: block;
				}
				
				&.fa-caret-up {
					display: none;
				}
			}
		}
	}
	
	@include dropdown-box;
	
	&.active {
		.title {
			font-weight: bold;
		}
		
		.info {
			.date-status {
				span {
					&.status {
						display: inline;
					}
				}
			}
		}
	}
	
	&.open {
		box-shadow:     0 2px 3px rgba(0, 0, 0, 0.3);
		padding-bottom: 0;
		overflow:       auto;
		
		.dropdown-icon {
			i {
				&.fa {
					&.fa-caret-down {
						display: none;
					}
					
					&.fa-caret-up {
						display:    block;
						margin-top: 0;
					}
				}
			}
		}
	}
}