.card {
	max-width: 420px;
	width: 100%;
	@include hard_panel($color-text-light);

	.card-title {
		color: $color-black;
		background: $color-text-light;
		padding: $space-2 $space-3;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
	}

	.card-content {
		padding: $space-4;
		height: 100%;

		.card-thumb {
			width: 100%;
		}

		p {
			margin-top: $space-2;
			margin-bottom: 0;
		}
	}

	.card-footer {
		padding: $space-2 $space-4;
		padding-bottom: $space-4;
	}

	&.status-card {
		max-width: 220px;
		overflow: hidden;

		transition-duration: .2s;
		transition-property: border-color;

		.status-icon-container {
			position: relative;

			.status-indicator {
				position: absolute;
		    top: -15px;
    		left: -5px;
		
				font-size: $icon-size-md;
				color: $color-error;

				&.status-online {
					color: $color-success;
				}
			}

			.status-icon {
				display: flex;
				flex-direction: row;
				align-items: center;
    		justify-content: center;
				
				font-size: $icon-size-display;
				height: 108px;
				width: 100%;

				transition-duration: .2s;
				transition-property: color;
			}
		}

		.card-title {
			display: flex;
			width: 100%;
			font-size: $font-size-md;
			font-weight: $font-weight-bold;

			align-items: center;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: space-between;

			transition-duration: .2s;
			transition-property: background-color, color;
		}

		.status-name {
			font-size: $font-size-sm;
			line-height: $line-height-normal;
		}

		&.card-success {
			@include state_panel($color-success);

			.status-icon {
				color: $color-success;
			}
		}

		&.card-warning {
			@include state_panel($color-warning);

			.status-icon {
				color: $color-warning;
			}
		}

		&.card-info {
			@include state_panel($color-info);

			.status-icon {
				color: $color-info;
			}
		}

		&.card-secondary {
			@include state_panel($color-secondary);

			.status-icon {
				color: $color-secondary;
			}
		}

		&.card-danger, &.card-error {
			@include state_panel($color-error);

			.status-icon {
				color: $color-error;
			}
		}
	}
}