.card {
	max-width: 420px;
	width: 100%;
	border: 2px solid $color-text-light;

	.card-title {
		color: $color-black;
		background: $color-text-light;
		padding: $space-2 $space-3;
	}

	.card-content {
		padding: $space-4;

		.card-thumb {
			width: 100%;
		}

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

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

	&.device-action {
		max-width: 200px;

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

		.device-icon-container {
			position: relative;

			.device-online-status {
				position: absolute;
		    top: -15px;
    		left: -5px;
		
				font-size: 24px;
				color: $color-error;

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

			.device-icon {
				display: flex;
				flex-direction: row;
				align-items: center;
    		justify-content: center;
				
				font-size: 54px;
				height: 80px;
				width: 100%;

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

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

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

		.device-name {
			font-size: $font-size-md;
			line-height: $line-height-normal;
		}

		&.card-success {
			border-color: $color-success;

			.card-title {
				background: $color-success;
			}

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

		&.card-warning {
			border-color: $color-warning;

			.card-title {
				background: $color-warning;
			}

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

		&.card-info {
			border-color: $color-info;

			.card-title {
				background: $color-info;
				color: $color-text-light;
			}

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

		&.card-secondary {
			border-color: $color-secondary;

			.card-title {
				background: $color-secondary;
				color: $color-text-light;
			}

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

		&.card-danger, &.card-error {
			border-color: $color-error;

			.card-title {
				background: $color-error;
			}

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