// ================================================================================================
//  File Name: card.scss
//  Description: Card classes provide layout structure using card, card-header, card-subtitle, card-body, card-body, card-footer etc.. classes 
//         related customiztion.
// ================================================================================================
.card {
	border: 0;
	margin: 18px 0;
	
	border-radius: $border-radius-base;

	@extend %std-font;

	&[class*="gradient-"] {
		.card-header, .card-footer {
			background-color: initial;
		}
	}

	.card-header {
		padding: 1.5rem;
		border-bottom: none;
		background-color: transparent;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.card-subtitle {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.card-body{
		padding: 0;
		height: auto;
	}
	.card-block {
		padding: 0.5rem 1.5rem 1.5rem;
	}
	.card-bordered {
		border: 1px solid rgba(0, 0, 0, 0.06);
	}
	&.card-transparent {
		background-color: transparent !important;
	}
	.card {
		box-shadow: none;
	}
	.card-img {
		position: relative;
		.card-title {
			color: #FFFFFF;
			position: absolute;
			bottom: 0;
			left: 0;
			max-width: 100%;
			padding: 24px;
		}
		&.overlap{
			margin-top: -40px;
		}
	}
	.btn-floating {
		display: inline-block;
		color: #FFFFFF;
		position: relative;
		overflow: hidden;
		z-index: 1;
		width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0;
		background-color: theme-color("primary");
		border-radius: 50%;
		transition: .3s;
		cursor: pointer;
		vertical-align: middle;
		font-size: 1rem;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
		&.btn {
			margin: 0;
		}
		i {
			width: inherit;
			display: inline-block;
			text-align: center;
			color: #FFFFFF;
			font-size: 2rem;
			line-height: 40px;
		}
		&.btn-large {
			width: 56px;
			height: 56px;
			&.halfway-fab {
				bottom: -28px;
			}
			i {
				line-height: 56px;
			}
		}
		&.halfway-fab {
			position: absolute;
			right: 24px;
			bottom: -20px;
		}
	}
	.card-reveal {
		padding: 24px;
		position: absolute;
		background-color: #FFFFFF;
		width: 100%;
		overflow-y: auto;
		left: 0;
		top: 100%;
		height: 100%;
		z-index: 3;
		transition:height 1s ease-in-out;
		display: none;
		.card-title {
			cursor: pointer;
		}
	}
	&.horizontal {
		.card-body {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
		}
		.card-img {
			max-width: 50%;
			img {
				border-radius: 2px 0 0 2px;
				max-width: 100%;
				width: auto;
			}
		}
	}
	.card-stacked {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		position: relative;
	}

	// --
	// Any h* will signal the larger size should render as 24sp
	@include headings() {
		&.card-title {
			text-transform: uppercase;
			font-weight: 500;
			letter-spacing: 0.05rem;
			font-size: 1.05rem;
			margin-bottom: 0.25rem;
		}
	}

	.card-footer {
		padding: 12px;
		overflow: hidden;
	}

	&.card-inverse {
		.card-blockquote .blockquote-footer, .card-link, .card-subtitle, .card-text, .card-title, .card-footer,
		a, a:hover,label, span, .form-group:hover,div,input {
			color: #FFFFFF;
		}
		.form-group.is-focused {
			.checkbox label, label.checkbox-inline,
			.radio label, label.radio-inline {
				color: #FFFFFF;
			}
		}
		hr {
			border-color: #FFFFFF;
		}
		.checkbox {
			label {
				color: #FFFFFF;
				.checkbox-decorator {
					.check {
						border-color: rgba(255,255,255,0.54);
					}
				}
			}
		}
		input {
			&::-webkit-input-placeholder,
			&::-moz-placeholder,
			&:-ms-input-placeholder,
			&:-moz-placeholder { 
				color: #FFFFFF;
			}
		}
	}
}