/* _bootstrap.scss */

html {

	.yw-theme-bootstrap5 {

		.yw-shortcode {

			.card-yw {
				border: var(--yw-card-border);
				box-shadow: var(--yw-card-box-shadow);
				transition: all 0.25s ease-in-out;
				top: 0;

				&:hover {
					top: var(--yw-card-top-hover);
					box-shadow: var(--yw-card-box-shadow-hover);
				}

				// CARD LIST

				@media (min-width: 768px) {

					&.card-yw-list {
						flex-direction: row;
						align-items: center;
						padding: 1rem;

						.card-header {
							padding: 0;
							flex: 0 0 6rem;
						}

						.card-body {
							padding: 0 2rem;
							flex: 1 1 auto;
						}

						.card-footer {
							padding: 0;
							flex: 0 0 auto;

							p {
								text-align: right;
							}
						}

						.card-header .yw-img-holder {
							width: 100%;
						}
					}
				}

				// BASE

				.card-header {
					padding-bottom: 0;
					border-bottom: 0;
					background: transparent;

					> :last-child {
						margin-bottom: 0;
					}
				}

				.card-body {

					> :last-child {
						margin-bottom: 0;
					}
				}

				.card-footer {
					padding-top: 0;
					border-top: 0;
					background: transparent;

					> :last-child {
						margin-bottom: 0;
					}
				}

				// CONTENT

				.yw-img-fluidX {
					// DEPRACTED(?) due yw-img-holder
					//padding: 1rem; // 0
					//max-height: clamp(160px, 16rem, 256px); // 16
					//min-height: clamp(120px, 12rem, 192px);
					//margin: 0 auto;
					//width: 100%;
				}

				.yw-img-holder {
					position: relative;
					width: 75%; // 100%
					margin: 0 auto;

					&::before {
						display: block;
						padding-top: 100%;
						content: "";
					}

					> img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}

				.card-title {
					color: var(--bs-gray-900);
					font-size: var(--yw-font-size-lg);

					a {
						color: inherit;
						text-decoration: none !important;
						transition: all 0.25s ease-in-out;

						&:hover,
						&:focus {
							color: var(--bs-primary);
							text-decoration: none !important;
						}
					}
				}

				.yw-price {
					margin: 0;

					+ .yw-meta {
						margin-top: 0.5rem;
					}
				}

				.yw-meta {
					margin: 0;
				}

				// CUSTOM

				&.card-yw-feed {

				}

				&.card-yw-search {

				}

				&.card-yw-compare {
					padding: 0;

					&:hover {
						top: 0;
						box-shadow: var(--yw-card-box-shadow);
					}

					.list-group {
						margin: 0;

						.list-group-item {
							margin: 0;
							transition: all 0.25s ease-in-out;

							&:hover {
								background: var(--bs-light);
							}

							.row {
								align-items: center;
							}

							a {
								color: var(--bs-gray-900);
								text-decoration: none !important;
								transition: all 0.25s ease-in-out;

								&:hover,
								&:focus {
									color: var(--bs-primary);
									text-decoration: none !important;
								}
							}
						}
					}
				}
			}
		}
	}
}