$cardListHeight: 48px;
$faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #ccc;
$cardToolbarBackgroundColor: brown;

div.cardList {
//	background-color: $yellow;

	&.loadingCard {
		li.selected {
			background-color: gray;
		}
	}

	ul {
		li {
			cursor: pointer;

			border-bottom: 1px solid #eee;

			@include flexbox();
			@include flex-direction(row);

			&.selected {
				background-color: yellow;
			}
			
			&.archived {
//				background-color: pink;
				background-color: $cardArchivedColor;
			}

			.favicon {
				width: $cardListHeight;
				@include flex(none);

				img {
					width: $faviconSize;
					height: $faviconSize;
					padding: $padding;
				}
			}

			.label {
				@include flex(auto);

				font-size: 18pt;

				padding-top: 0.5em;
				padding-bottom: 0.5em;
				padding-left: $padding;
				padding-right: $padding;
			}
			
		}
	}

}

div.cardList.narrow {
	&.loadingCard {
		li.selected {
//			background-color: gray;

			&:after {
				color: white;
				margin-right: 10px;
				content: "loading";
				@include animation(spin, 1s, linear, infinite);
			}
			
		}
	}

	ul {
		li {
			
			&:after {
				content: "show detail";
				@include flex(none);
				@include icon-font();
				height: 48px;
				font-size: 24pt;
				line-height: 48px;
				margin-right: 25px;
			}
		}
	}
	
	&.EXPIRED {
		ul {
			li {
				&:after {
					content: "";
				}
			}
		}
	}
}

$cardViewBasePadding: 10px;

#cardDetailPage, .cardDetail {
	.loading {
//		height: 100%;
//		width: 100%;
//		background-color: rgba(0,0,0,0.5);
	}

	.view {
		
		&.archived {
//			background-color: pink;
			background-color: $cardArchivedColor;
		}
		
		.cardDetailToolbar {
			background-color: $cardToolbarBackgroundColor;
			color: white;

			&.narrow {
				font-size: 24pt;

				.back {
					@include icon-font();
				}
				
				.cardMenuOptions {
					@include icon-font();
					text-align: right;
					font-size: 18pt;
					padding-right: 10px;
					
				}

				.commandMenu {
//					display: none;
					.commandMenuMask {
						display: none;
					}
					
					.commandMenu {
						display: none;
					}
					
					&.show {

						.commandMenuMask {
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0);
						}

						.commandMenu {
							display: block;
							float: right;
							position: absolute;
							min-width: 200px;
							top: 48px;
							right: 5px;
							color: black;
							background-color: white;
							@include box-shadow(0px, 2px, 5px, rgba(50, 50, 50, 0.75));
					
							ul {
								@include flex-direction(column);
						
								li {
									text-align: left;
									font-size: 18pt;
									padding: 5px 10px;
									border-bottom: 1px solid black;
							
								}
							}
						}
					}
					
				}
			}
		}		
	}
	
	.edit {
		.cardDetailToolbar {
//			background-color: purple;
			background-color: $cardToolbarBackgroundColor;
			color: white;
//			@include icon-font();
//			font-size: 20pt;
		}
	}
}	





.cardDetailToolbar {
	&.edit {
		li {
			font-weight: 100;
//			color: #aaa;
			
			&:hover {
				color: white;
			};
		}
		li.save {
//			color: yellow;
		}
		
		&.hasPendingChanges {
			li {
//				color: #ccc;
				font-weight: 500;
			}
			li.save {
//				color: white;
			}
		}
	}
	
	ul {
		li {
			text-align: center;
		}
	}
	
	&.narrow {
		.cardMenuOptions {
			margin-right: 5px;
		}
	}
}

.content {
	.cardLabel {
		@include user-select(text);
		
		font-size: 24pt;
		width: 100%;
		padding: $cardViewBasePadding;
//		height: 52px;
//		line-height: 32px;
		border: 0px;
	}
	
	input.cardLabel {
		height: 52px;
	}

	.tagEditor {
		padding: $cardViewBasePadding;
	}

	.cardNotes {
		padding: $cardViewBasePadding;
		width: 100%;
	}

	.dropArea {
		border: 3px dashed red;
		width: 100%;
		height: 40px;
	}

	.cardField {
		@include flexbox;
		@include flex-direction(row);
		
//		background-color: lightgreen;

		&.dragged {
//			border: 4px dotted red;
			display: none;
		}
		.fieldValues {
			@include flex(1);
			padding: $cardViewBasePadding;

			.fieldLabel {
				color: gray;
			}

			.fieldValue {
				font-size: 18pt;
				@include user-select(text);

				&.hidden {
					font-family: clipperz-password;
				}
			}

			.removeField {
				@include icon-font();
				cursor: pointer;
				color: gray;
				font-size: 20pt;

				&:hover {
					color: red;
				};
			}
		}

		.fieldAction {
			@include flex(none);
			@include align-self(center);
		}
	
		.action {
			width: 32px;
			height: 32px;
			@include icon-font();
			font-size: 20pt;
		}

	}

	.newCardField {
		@include icon-font();
		cursor: pointer;
		color: gray;
		font-size: 20pt;

		&:hover {
			color: green;
		};
	}

	.cardDirectLogin {
		font-size: 18pt;
		padding: $cardViewBasePadding;
//		background-color: pink;
		background-color: $clipperz-orange;
		color: white;
		cursor: pointer;
	}
}