@use "../kit-deps" as *;
@use "typography" as *;

.card {
	position: relative;
	max-width: 340px;
	width: max-content;
	overflow: hidden;
	@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 {
			display: block;
			width: min(68%, 190px);
			margin: $space-5 auto $space-6;
		}

		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;

		.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: flex-start;

				font-size: $icon-size-display;
				height: 108px;
				width: 100%;
			}
		}

		.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;
		}

		.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;
			}
		}
	}

	&.metric-card {
		max-width: 320px;
		border-color: $border-color-muted;

		.card-content {
			display: flex;
			flex-direction: column;
			gap: $space-4;
		}

		.metric-card-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: $space-3;
		}

		.metric-card-label {
			margin: 0;
			color: $color-text-medium;
			font-size: $font-size-sm;
			font-weight: $font-weight-semibold;
			text-transform: uppercase;
		}

		.metric-card-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: $control-height-md;
			height: $control-height-md;
			color: $color-black;
			background: $color-secondary;
			font-size: $icon-size-md;
		}

		.metric-card-value {
			margin: 0;
			color: $color-text-light;
			font-size: $font-size-h1;
			font-weight: $font-weight-bold;
			line-height: $line-height-tight;
		}

		.metric-card-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: $space-2;
			color: $color-text-dark;
			font-size: $font-size-sm;
		}

		.metric-card-delta {
			color: $color-success;
			font-weight: $font-weight-bold;

			&.metric-card-delta-negative {
				color: $color-error;
			}
		}
	}

	&.card-horizontal {
		max-width: none;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		overflow: hidden;

		.card-media {
			flex: 0 0 20%;
			min-width: 80px;
			max-width: 160px;
			overflow: hidden;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		.card-body {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			padding: $space-4;
			gap: $space-3;
		}

		.card-title {
			padding: 0;
			background: transparent;
			color: $color-text-light;
			font-size: $font-size-lg;
			font-weight: $font-weight-bold;
			text-transform: none;
			line-height: $line-height-snug;

			a {
				color: inherit;
				text-decoration: none;
			}
		}

		.card-content {
			padding: 0;
			height: auto;

			p {
				margin: 0;
			}
		}

		.card-footer {
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: $space-3;
			color: $color-text-medium;
			font-size: $font-size-sm;
		}
	}

	&.action-card {
		max-width: 360px;
		border-color: $color-secondary;

		.card-content {
			display: flex;
			flex-direction: column;
			gap: $space-4;
		}

		.action-card-kicker {
			display: inline-flex;
			width: max-content;
			padding: $space-1 $space-2;
			color: $color-black;
			background: $color-secondary;
			font-size: $font-size-xs;
			font-weight: $font-weight-bold;
			line-height: $line-height-base;
			text-transform: uppercase;
		}

		.action-card-title {
			margin: 0;
			font-size: $font-size-xl;
			font-weight: $font-weight-bold;
			line-height: $line-height-snug;
			text-transform: uppercase;
		}

		.action-card-text {
			margin: 0;
			color: $color-text-medium;
			font-size: $font-size-sm;
			line-height: $line-height-relaxed;
		}

		.action-card-actions {
			display: flex;
			flex-wrap: wrap;
			gap: $space-2;
			margin-top: $space-2;
		}
	}

		&.login-card {
			max-width: 100%;
			width: 460px;
			border-color: $color-primary;

		.login-card-header {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: $space-3;
			padding: $space-3;
		}

		.login-card-logo {
			display: block;
			width: auto;
			max-height: 40px;
		}

		.login-card-logo-icon {
			font-size: $icon-size-display;
			color: $color-primary;
		}

		.login-card-title {
			font-size: $font-size-xl;
			font-weight: $font-weight-bold;
			text-transform: uppercase;
		}

		.login-card-form {
			display: flex;
			flex-direction: column;
			gap: $space-4;
		}

		.login-card-submit {
			width: max-content;
			margin-top: $space-2;
		}

		.form-group {
			margin-bottom: 0;
		}

		.login-card-links {
			display: flex;
			justify-content: space-between;
			gap: $space-3;
			margin-top: $space-2;
			font-size: $font-size-sm;
		}

		.login-card-link {
			color: $color-text-medium;
			text-decoration: none;

			@include hover_touch {
				color: $color-text-light;
				text-decoration: underline;
			}
		}

		.login-card-error {
			margin-bottom: $space-2;
		}
		}
	}