// ----------------------------------------------------------------------------
// STYLE-TEMPLATES OVERVIEW
// ----------------------------------------------------------------------------

.my-styles-view {
	.styles-container {
		min-width: 320px;
		position: relative;
		height: 100%;
	}
	
	.headline {
		overflow: auto;
		
		h2 {
			font-size:   18px;
			font-weight: bold;
		}
	}
	
	.styles-list {
		list-style: none;
		
		.element {
			border:  1px solid transparent;
			margin:  12px 15px;
			padding: 12px 0;
			
			.active-icon {
				color: 			$font-color-inactive;
				display:        table-cell;
				float:          none;
				vertical-align: middle;
				
				.fa-check {
					visibility: hidden;
				}
			}
			
			.info {
				.name {
					max-width:     175px;
					overflow:      hidden;
					text-overflow: ellipsis;
					white-space:   nowrap;
				}
			}
			
			@include actions-dropdown;
			
			&.selected {
				border: 1px solid $primary-color;
			}
			
			&.open {
				border:     1px solid darken($border-color-light, 10);
				background: $background-light;
			}
			
			&.active {
				.name {
					font-weight: bold;
				}
				
				.active-icon {
					color: $primary-color;

					.fa-check {
						visibility: visible;
					}
				}
			}
			
			.dropdown-icon {
				cursor: pointer;
			}
			
			&:hover {
				&:not(.open) {
					border-color: darken($border-color-light, 20);
					cursor:       pointer;
				}
			}
		}
	}
}