@use '../../utils' as *;
/*----------------------------------------*/
/* 5.4 Sidebar css
/*----------------------------------------*/
.mt-blog-sidebar {
&-widget {
border: 1px solid var(--mt-border-3);
padding: 32px 24px;
}
&-title {
color: #fff;
position: relative;
& span {
height: 10px;
width: 10px;
border-radius: 30px;
background: var(--mt-theme-2);
display: inline-block;
margin-right: 5px;
@include transform(translateY(-3px));
}
}
&-post-thumb {
& img {
width: 100%;
border-radius: 10%;
}
}
&-post-title {
color: #fff;
&:hover {
color: var(--mt-theme-2);
}
}
&-cat {
& ul {
& li {
margin-bottom: 15px;
list-style: none;
& a {
color: rgb(255 255 255);
display: block;
padding: 16px 25px;
line-height: 1;
position: relative;
border: 1px solid var(--mt-border-3);
border-radius: 0px;
@include transition(.4s);
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-white);
border-color: var(--mt-theme-1);
}
&:after {
content: "\f178";
font-family: "Font Awesome 6 Pro";
position: absolute;
right: 25px;
top: 50%;
@include transform(translateY(-50%));
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
.mt-blog-form {
& input {
border: 1px solid var(--mt-border-3);
border-radius: 0px;
color: #fff;
@include placeholder {
color: #ffffff;
}
}
& button {
position: absolute;
right: 0px;
top: 50%;
@include transform(translateY(-50%));
background: var(--mt-theme-1);
width: 50px;
height: 50px;
font-size: 20px;
color: #fff;
}
}
.mt-blog-sidebar-post-item {
border-bottom: 1px solid var(--mt-border-3);
margin-bottom: 20px;
padding-bottom: 15px;
&:last-child {
margin: 0;
padding: 0;
border: 0;
}
}
.tagcloud {
& a {
font-size: 13px;
font-weight: 500;
border: 1px solid var(--mt-border-3);
color: var(--mt-common-white);
padding: 10px 13px;
display: inline-block;
line-height: 1;
border-radius: 50px;
margin-right: 5px;
margin-bottom: 8px;
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-white);
border-color: var(--mt-theme-1);
}
}
}