/* HubUi-X Theme */
@import "common.less";
li {
    border-radius: @border-radius !important;
}
.FlarumBlogOverview .BlogFeatured-list-item,
.FlarumBlogOverview .BlogFeatured-list-item-top .dataItem,
.FlarumBlog-Article-Content,
.FlarumBlog-Article-Comments,
.BlogSideWidget-item,
.FlarumBlog-Article-Author {
    border-radius: @border-radius !important;
    box-shadow: unset !important;
}
.BlogSideWidget {
    border-radius: @border-radius !important;
    box-shadow: unset !important;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
}
.FlarumBlog-Article-Author-background,
.FlarumBlogItem .FlarumBlog-Article .FlarumBlog-Article-Container .FlarumBlog-Article-Image {
    border-radius: @border-radius @border-radius 0 0 !important;
    box-shadow: unset !important;
}
.WelcomeHero {
    color: #fdfdfd;
    background: linear-gradient(160deg, var(--control-bg-shaded), var(--button-primary-bg-hover));
}
body, #app .App-content {
    background-color: var(--control-bg-light);
}
#drawer, #app-navigation, #header {
    & when (@config-colored-header = false){
        background-color: var(--control-bg-light);
    }
}
.AfruxWidgets-Widget-content {
    border-radius: @border-radius;
}
.item-like .Button--link .Button-label,.item-dislike .Button--link .Button-label,.item-reply .Button--link .Button-label {
	display:none;
}
.item-like .Button:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 14px;
	content: '\f164';
	vertical-align: -1px;
}
.item-dislike .Button:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 14px;
	content: '\f165';
	vertical-align: -3px;
}
.item-reply .Button--link:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 15px;
	content: '\f3e5';
	margin-right: 4px;
	vertical-align: -2px;
}
.PostStream {
    border-radius: @border-radius;
    margin-top: 4px;
    padding: 4px 22px 4px 22px;
    & when (@config-dark-mode = false) {
        background-color: rgba(255,255,255,1.0);
    }
    & when (@config-dark-mode = true) {
        background-color: rgba(14,14,14,1.0);
    }
}
.PostsUserPage {
    border-radius: @border-radius;
    margin-top: 4px;
    padding: 12px 22px 12px 22px;
    & when (@config-dark-mode = false) {
        background-color: rgba(255,255,255,1.0);
    }
    & when (@config-dark-mode = true) {
        background-color: rgba(14,14,14,1.0);
    }
}
.DiscussionListItem {
    margin: 8px 0px 8px 0px;
    border-radius: @border-radius !important;
    & when (@config-dark-mode = false) {
        background-color: rgba(255,255,255,1.0);
    }
    & when (@config-dark-mode = true) {
        background-color: rgba(14,14,14,1.0);
    }
}
.DiscussionListItem-content {
    border-radius: @border-radius !important;
}
.DiscussionList-loadMore {
    margin-top: 4px;
    @media @phone {
        margin: 4px 8px;
    }
    .Button {
        width: 100%;
        height: 100%;
    }
}
aside.DiscussionPage-list {
    padding: 4px;
}
.Slidable-content {
    margin-top: 4px;
}
@media @phone {
    .DiscussionListItem {
        margin: 8px;
    }
}
@media @tablet-up {
    li.item-nav {
        padding: 2px 12px 2px 12px;
        border-radius: @border-radius;
        & when (@config-dark-mode = false) {
            background-color: rgba(255,255,255,1.0);
        }
        & when (@config-dark-mode = true) {
            background-color: rgba(14,14,14,1.0);
        }
    }
    .SettingsPage, .UserSecurityPage, .MasqueradeRoot {
        border-radius: @border-radius;
        margin-top: 4px;
        padding: 12px 22px 12px 22px;
        & when (@config-dark-mode = false) {
            background-color: rgba(255,255,255,1.0);
        }
        & when (@config-dark-mode = true) {
            background-color: rgba(14,14,14,1.0);
        } 
    }
}
.Badge {
    opacity: 0.9;
    color: #fff;
}
.Hero-close {
    display: none;
}
header.Hero.DiscussionHero, header.Hero.WelcomeHero {
    border-radius: @border-radius;
}
.darkenBackground,.Hero {
    border-radius: @border-radius;
}
.Hero {
    margin: 12px;
}
ul.NotificationGroup-content {
    &>li {
        margin: 4px 8px;
        &>a {
            &.Notification {
                border-radius: @border-radius;
            }
            &.unread .Notification-title:after {
                content: '';
                display: inline-block;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                background-color: var(--primary-color);
                transform: translateY(10%);
                margin-left: 8px;
            }
        }
    }
}
.Composer {
    border-radius: 12px 12px 0 0;
}
.ComposerBody-loading {
    border-radius: 12px;
}
@media (min-width:992px){
    .TagTiles>li{
        width: 30% !important;
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
@media (max-width:991px) and (min-width:768px){
    .TagTiles>li{
        width: 45% !important;
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
@media (max-width: 767px){
    .TagTiles>li{
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
