@use '../utils' as *;

/*----------------------------------------*/
/*  Postbox css
/*----------------------------------------*/

// postbox style
.postbox-wrapper {
	@media #{$xs, $sm, $md, $lg} {
	  padding-inline-start: 0;
	}
}
.postbox-text {
	p {
		line-height: 26px;
		b {
			color: var(--td-white);
			font-weight: 500;
		}
	}
}
.postbox-thumb {
	img {
		border-radius: 10px;
	}
}
.postbox-title {
	h3 {
		font-size: 25px;
        color: var(--td-white);
		margin-bottom: 30px;
		@media #{$xl,$lg} {
			font-size: 26px;
		}
		@media #{$md} {
			font-size: 26px;
		}
		@media #{$sm} {
			font-size: 24px;
		}
		@media #{$xs} {
			font-size: 22px;
		}
		@media #{$xxs} {
			font-size: 20px;
		}
	}
}
.sidebar-wrapper {
    padding: 25px 30px 30px;
    background: rgba($white, $alpha: 0.08);
    border: 1px solid rgba($white, $alpha: 0.08);
    border-radius: 10px;
	@media #{$xxs,$lg} {
		padding: 20px 20px;
	}
}
.sidebar-widget-title {
	margin-bottom: 25px;
	color: var(--td-white);
	font-size: 22px;
	@media #{$xxs} {
		font-size: 20px;
	}
}

// Recent post style
.rc-post-item {
    display: flex;
    align-items: start;
    gap: 20px;
    padding: 12px 12px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    background: rgba($white, $alpha: 0.08);
    border: 1px solid rgba($white, $alpha: 0.08);
	&:not(:last-child) {
	  margin-bottom: 20px;
	}
}
.rc-post-title {
    font-size: 15px;
    color: var(--td-white);
    margin-bottom: 8px;
	@media #{$xxs} {
		font-size: 14px;
        line-height: 1.2;
	}
	a {
		&:hover {
			color: var(--td-primary);
		}
	}
}
.rc-meta {
	p {
		font-size: 12px;
		margin-bottom: 0;
	}
}
.rc-post-thumb {
    width: 80px;
    height: 90px;
    min-width: 80px;
	@media #{$xxs} {
		max-width: 66px;
	}
	& img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
	}
}
.rc-title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -0.2px;
	margin-bottom: 2px;
	& a {
	  &:hover {
		color: $white;
	  }
	}
}
.rc-meta {
	  & span {
		font-size: 14px;
		position: relative;
		padding-inline-start: 15px;
		&::before {
		  position: absolute;
		  content: "";
		  height: 5px;
		  width: 5px;
		  background: rgba(124, 126, 130, 0.5);
		  top: 50%;
		  left: 0;
		}
	}
}


.form-group.keyword-search-form {
	position: relative;
	input {
		height: 55px;
		width: 100%;
		padding-inline-start: 20px;
		padding-inline-end: 70px;
		border-radius: 10px;
		border: 0;
	}
	.search-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		inset-inline-end: 20px;
	}
	
}
.tagcloud{
    a{
		display: inline-block;
		font-weight: 500;
		font-size: 14px;
		line-height: 1;
		padding: 9px 18.5px;
		text-transform: capitalize;
		margin-bottom: 6px;
		margin-inline-end: 2px;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
		background: rgba($white, $alpha: 0.08);
		border: 1px solid rgba($white, $alpha: 0.08);
        &:hover{
            background: var(--td-primary);
            color: var(--td-white);
        }
    }
}
