@use "../utilities" as *;

/**----------------------------------------
START: Award CSS
----------------------------------------*/
.tj-award {
	&-wrapper {
		display: flex;
		flex-direction: column;
		gap: 15px;
		position: relative;
		z-index: 0;
		.active-bg {
			top: 0px;
			bottom: 0px;
			inset-inline-start: 0px;
			inset-inline-end: 0px;
			position: absolute;
			opacity: 0;
			transition: 0.6s;
			background-color: var(--tj-color-theme-primary);
			border-radius: 8px;
			z-index: 1;
		}
		&:has(.tj-award-item:hover) {
			.active-bg {
				opacity: 1;
			}
		}
	}
	&-title,
	&-date,
	&-index,
	&-result {
		font-weight: var(--tj-fw-sbold);
		margin-bottom: 0;
		transition: 0.4s;
	}
	&-item {
		background-color: var(--tj-color-common-white);
		border-radius: 8px;
		&-inner {
			padding: 35px;
			overflow: hidden;
			position: relative;
			z-index: 2;
			@media #{$xs} {
				padding: 30px 15px;
			}
			.tj-award {
				&-img {
					position: relative;
					z-index: 0;
					overflow: hidden;
					img {
						transition: 0.4s;
						&:first-child {
							opacity: 1;
						}
						&:nth-child(2) {
							position: absolute;
							width: 100%;
							inset-inline-start: 0;
							top: 0;
							z-index: -1;
						}
					}
					&-wrapper {
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 10px;
						@media #{$md} {
							gap: 35px;
						}
						@media #{$sm,$xs} {
							align-items: flex-end;
						}
					}
				}
				&-title {
					&-wrapper {
						padding-inline-start: 40px;
						@media #{$md} {
							padding-inline-start: 30px;
						}
						@media #{$sm,$xs} {
							padding-inline-start: 12px;
						}
						@media #{$sm,$xs} {
							margin-top: 10px;
						}
					}
				}
				&-result {
					color: var(--tj-colot-theme-dark-3);
				}
				&-date {
					&-wrapper {
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 10px;
						@media #{$md} {
							padding-inline-start: 30px;
						}
						@media #{$sm,$xs} {
							margin-top: 12px;
						}
					}
				}
			}
			&:hover {
				.tj-award {
					&-title,
					&-date,
					&-index,
					&-result {
						color: var(--tj-color-common-white);
					}
					&-img {
						img {
							&:first-child {
								opacity: 0;
							}
						}
					}
				}
			}
		}
	}
}

/* !END: Award CSS */