.#{$prefix} {
	& &-card {
		display: flex;
		flex-direction: column;
		border: 0.063rem solid rgb(var(--wpt-lms-box-border));
		background-color: rgb(var(--wpt-lms-white));
		box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-800), 0.06);
		border-radius: 0.188rem;
		position: relative;
	}
	& &-card-header {
		padding: 1rem;
		border-bottom: 0.063rem solid rgb(var(--wpt-lms-box-border));
		font-size: 1rem;
		font-weight: 500;
		width: 100%;
	}
	& &-card-body {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		p {
			margin: 0;
		}
		h4 {
			font-size: 0.938rem;
			font-weight: 500;
		}
		select {
			max-width: 100%;
			option {
				white-space: normal;
			}
		}
		.#{$prefix}-wrap {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			gap: 1rem;
		}
	}
	& &-card-action {
		display: flex;
		flex-flow: row wrap;
		gap: 0.75rem;
	}
	// course_card
	&-courses-list {
		display: grid;
		grid-template-rows: repeat(var(--wpt-lms-rows, 1), 1fr);
		grid-template-columns: repeat(var(--wpt-lms-course-columns, 12), 1fr);
		gap: var(--wpt-lms-gap, 1.5rem);
		.#{$prefix}-card {
			// justify-content: space-between;
			border: 0.063rem solid rgba(var(--wpt-lms-box-border), 0.5);
			border-radius: 0.75rem;
			padding: 0.75rem;
			transition: all 0.3s ease-in-out;
			gap: 1rem;
			box-shadow: none;
			&:hover {
				box-shadow: 0 4px 12px rgba(var(--wpt-lms-primary-500), 0.1);
				border-color: rgba(var(--wpt-lms-primary-200));
			}
			&-header {
				width: 100%;
				// height: 18.75rem;
				display: block;
				overflow: hidden;
				padding: 0;
				border-radius: 0.375rem;
				border: 0;
				img {
					width: 100%;
					height: 100%;
					aspect-ratio: 16/9;
					object-fit: cover;
					object-position: center;
					transition: all 0.5s ease;
				}
				&:focus {
					box-shadow: none;
					outline: 0;
				}
			}
			&-body {
				padding: 0;
				justify-content: space-between;
				flex: 1;
				position: relative;
				gap: 1rem;
				.#{$prefix}-card-head {
					// padding: 1rem;
					display: flex;
					flex-direction: column;
					gap: 0.625rem;
					.#{$prefix}-card-title {
						display: flex;
						flex-direction: column;
						gap: 0.75rem;
						.#{$prefix}-title {
							display: flex;
							align-items: center;
							gap: 0.5rem;
							a {
								h3 {
									font-size: 0.75rem;
									font-weight: 600;
									color: rgba(var(--wpt-lms-black), 0.75);
									word-break: break-word;
									text-transform: capitalize;
								}
								&:focus {
									outline: 0;
									box-shadow: none;
								}
							}
							.#{$prefix}-categories {
								border-radius: 5px;
								box-shadow: none;
								height: max-content;
								padding: 0.25rem 0.5rem;
								background-color: rgb(var(--wpt-lms-primary-100));
								color: rgb(var(--wpt-lms-primary-700));
								text-transform: capitalize;
								font-size: 0.75rem;
							}
						}
						.#{$prefix}-course-permalink {
							font-size: 1rem;
							font-weight: 600;
							color: rgb(var(--wpt-lms-black));
							text-transform: capitalize;
							&:focus {
								outline: 0;
								box-shadow: none;
							}
						}
					}
					p {
						word-break: break-word;
					}
					.#{$prefix}-course-meta {
						display: none;
						li {
							display: flex;
							gap: 0.5rem;
							align-items: center;
							color: rgb(var(--wpt-lms-gray));
							font-size: 0.875rem;
							font-weight: 500;
							i {
								width: 1.625rem;
								height: 1.625rem;
								display: flex;
								place-content: center;
								flex-wrap: wrap;
								background-color: rgba(var(--wpt-lms-gray), 0.1);
								border-radius: 4px;
								color: rgb(var(--wpt-lms-gray));
							}
						}
					}
				}
			}
			&-footer {
				padding: 0.625rem 0 0;
				border-top: 0.063rem solid rgba(var(--wpt-lms-box-border), 0.25);
				display: flex;
				flex-wrap: wrap;
				gap: 0.625rem;
				justify-content: flex-start;
				align-items: center;
				.#{$prefix}-course-price {
					display: flex;
					gap: 0.5rem;
					align-items: flex-end;
					.origin-price {
						font-size: 1rem;
						font-weight: 600;
						color: rgb(var(--wpt-lms-gray));
					}
					.price {
						font-size: 1rem;
						color: rgb(var(--wpt-lms-black));
						font-weight: 600;
					}
					&.free {
						font-size: 1rem;
						font-weight: 600;
					}
				}
			}
			&:hover img {
				transform: scale(1.2);
			}
		}
		&[data-layout="list"] {
			display: grid;
			grid-template-rows: repeat(var(--wpt-lms-rows, 1), 1fr);
			grid-template-columns: repeat(1, 1fr);
			gap: var(--wpt-lms-gap, 1.5rem);
			.#{$prefix}-card {
				flex-direction: row;
				gap: 1rem;
				&-header {
					width: 20rem;
					height: auto;
				}
				&-body {
					justify-content: center;
					gap: 1rem;
					.#{$prefix}-card-head {
						padding: 0;
						gap: 1rem;
						.#{$prefix}-card-title {
							display: flex;
							flex-direction: column;
							gap: 0.25rem;
							align-items: flex-start;
							.#{$prefix}-course-permalink {
								font-size: 1.25rem;
								font-weight: 600;
							}
						}
						ul {
							display: flex;
							flex-wrap: wrap;
							gap: 1rem;
						}
					}
				}
				&-footer {
					justify-content: flex-start;
					.#{$prefix}-course-price {
						.origin-price {
							font-size: 1.125rem;
						}
						.price {
							font-size: 1.125rem;
						}
						&.free {
							font-size: 1.125rem;
						}
					}
				}
			}
		}
		// &[data-layout="list"] {
		// 	.#{$prefix}-card:last-child {
		// 		border-bottom: 0;
		// 	}
		// }
	}
	.#{$prefix}-profile-courses {
		grid-template-columns: repeat(var(--wpt-lms-course-columns, 12), 1fr);
	}
	.#{$prefix}-column-card {
		.#{$prefix}-card-body {
			.#{$prefix}-wrap {
				flex-direction: row;
				.#{$prefix}-form-check {
					cursor: pointer;
					input {
						display: none;
					}
					.#{$prefix}-form-check-control {
						flex-direction: row;
						background-color: transparent;
						padding: 0.625rem;
						border-radius: 0.188rem;
						position: relative;
						&::before {
							position: absolute;
							content: "\EB80";
							font-family: "remixicon";
							color: rgb(var(--wpt-lms-primary-700));
							right: -6px;
							top: -9px;
							height: 1.25rem;
							width: 1.25rem;
							display: none;
						}
						span {
							width: 20px;
							height: 30px;
							background-color: rgb(var(--wpt-lms-primary-700), 10%);
							border: 1px solid rgb(var(--wpt-lms-primary-700));
							border-radius: 0.188rem;
						}
					}
				}
				input[type="radio"]:checked+ {
					.#{$prefix}-form-check-control {
						background-color: rgb(var(--wpt-lms-primary-700), 10%);
						span {
							background-color: rgb(var(--wpt-lms-primary-700));
						}
						&::before {
							display: block;
						}
					}
				}
			}
		}
	}
}
// Responsive
// Course card
@media (min-width: 1024px) and (max-width: 1200px) {
	.#{$prefix}-courses-list[data-layout="grid"] {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.#{$prefix}-courses-list {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (min-width: 576px) and (max-width: 1024px) {
	.#{$prefix}-courses-list[data-layout="grid"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.#{$prefix}-courses-list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (min-width: 768px) and (max-width: 992px) {
	.#{$prefix}-courses-list[data-layout="grid"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.#{$prefix}-courses-list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 768px) {
	.#{$prefix}-courses-list[data-layout="grid"] {
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.#{$prefix}-courses-list {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}
@media (min-width: 678px) and (max-width: 992px) {
	.#{$prefix}-courses-list {
		&[data-layout="list"] {
			.#{$prefix}-card-header {
				width: 18.75rem;
				img {
					width: 18.75rem;
				}
			}
		}
	}
}
@media (max-width: 678px) {
	.#{$prefix}-courses-list {
		&[data-layout="list"] {
			.#{$prefix}-card {
				flex-direction: column !important;
				.#{$prefix}-card-header {
					width: 100%;
					img {
						width: 100%;
					}
				}
			}
		}
	}
}
@media (max-width: 576px) {
	.#{$prefix}-courses-list {
		grid-template-columns: repeat(1, 1fr);
	}
}