.#{$prefix}-topbar{
    background-color: $color_light_gray;
    .menu-description{
        display: none;
    }
    .#{$prefix}-wrapper{
        align-items: center;
    }
    .#{$prefix}-date-section{
        flex: 0 0 160px;
        max-width: 160px;
        height: 35px;
        line-height: 40px;
        text-align: center;
        span{
            display: inline-block;
            padding: 0 2.5px;
        }
       
    }
    .#{$prefix}-off-canvas{
        flex: 0 0 50px;
        max-width: 50px;
    }
    .#{$prefix}-social-icon-section{
        flex: 0 0 200px;
        max-width: 200px;
        height: 35px;
        overflow: hidden;
        .blook-social-icon{
            justify-content: flex-end;
        }
    }
    .#{$prefix}-top-navigation{
        display: none;
        @include media(sm){
            display: block;
        }
    }
    .#{$prefix}-tag-section{
        justify-content: center;
        @include media(xs){
            justify-content: flex-start;
        }
    }

    .#{$prefix}-tag-caption{
        display: none;
        @include media(sm){
            display: inline-block;
        }
    }
 
}

.#{$prefix}-topbar-layout-1,
.#{$prefix}-topbar-layout-3{
    .#{$prefix}-wrapper{
        justify-content: space-between;
    }
    .#{$prefix}-top-navigation{
        padding: 0 10px;;
        ul{
            justify-content: center;
        }
    } 
}
.#{$prefix}-topbar-layout-2,
.#{$prefix}-topbar-layout-4{
    .#{$prefix}-wrapper{
        justify-content: center;
    }
    .#{$prefix}-tag-section{
        align-items: center;
        a{
            padding: 0 10px;
            margin-top: 5px;
        }
    }
    .#{$prefix}-date-section,
    .#{$prefix}-tag-section,
    .#{$prefix}-social-icon-section{
        flex:  0 0 100%;
        max-width: 100%;
       
    }
}

.#{$prefix}-topbar-layout-1{
    .#{$prefix}-top-navigation{
        flex:  0 0 calc(100% - 210px);
        max-width: calc(100% - 210px);
    }
}
.#{$prefix}-topbar-layout-2{
   
    .#{$prefix}-date-section{
        @include media(xs){
            flex: 0 0 160px;
            max-width: 160px;   
        }
    }
    .#{$prefix}-tag-section{
        @include media(xs){
            flex:  0 0 calc(100% - 160px);
            max-width: calc(100% - 160px);
        }
     
    }
  
}
.#{$prefix}-topbar-layout-3{
    .#{$prefix}-top-navigation{
        flex:  0 0 calc(100% - 250px);
        max-width: calc(100% - 250px);
    }
}
.#{$prefix}-topbar-layout-4{
    .#{$prefix}-tag-section{
        @include media(xs){
            flex:  0 0 calc(100% - 200px);
            max-width: calc(100% - 200px);
        }
    }
    .#{$prefix}-social-icon-section{
        @include media(xs){
            flex: 0 0 200px;
            max-width: 200px;   
        }
    }
}