/*==========================================================
    Search
==========================================================*/
.category-search-result{

    display:none;

    flex:1;

    overflow:auto;

    background:var(--background);

}

.category-search-result.show{

    display:block;

}

.category-search-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    height:58px;

    padding:0 18px;

    border-bottom:1px solid var(--border);

    text-decoration:none;

    color:var(--text);

    transition:.2s;

}

.category-search-item:hover{

    background:var(--surface);

}

.category-search-info{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.category-search-info strong{

    font-size:13px;

    font-weight:700;

    color:var(--text);

}

.category-search-info small{

    color:var(--muted);

    font-size:11px;

}

.category-search-item i{

    color:var(--muted);

    font-size:12px;

}
/*==========================================================
    Search Empty
==========================================================*/

.category-search-empty{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:var(--muted);

    padding:40px 20px;

}

.category-search-empty i{

    font-size:42px;

    opacity:.35;

    margin-bottom:18px;

}

.category-search-empty h3{

    margin:0;

    font-size:14px;

    font-weight:700;

    color:var(--text);

}

.category-search-empty p{

    margin-top:8px;

    font-size:12px;

    color:var(--muted);

}
.category-search {

    position: relative;

    padding: 2px;

}
.category-search input::placeholder{

    line-height:48px;

}
.category-search input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0 12px 1px 48px;
    outline: none;
}

.category-search input:focus {

    border-color: var(--primary);

}

.category-search i {

    position: absolute;

    left: 18px;
    top: 15px;

    color: var(--muted);

}

/*==========================================================
    Breadcrumb
==========================================================*/

.category-breadcrumb {
    display: none;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 3px 16px 3px;
    scrollbar-width: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
}

.category-breadcrumb.show{

    display:flex;

}

.category-breadcrumb::-webkit-scrollbar {

    display: none;

}
.category-breadcrumb .breadcrumb-item{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    height:34px;

    color:var(--muted);

    text-decoration:none;

    white-space:nowrap;

    font-size:13px;

    transition:.2s;

}

.category-breadcrumb .breadcrumb-item.active{

    color:var(--primary);

    font-weight:700;

}

.category-breadcrumb i{

    flex:0 0 auto;

    font-size:11px;

    color:var(--muted);

}
/*==========================================================
    Wrapper
==========================================================*/

.category-wrapper {

    flex: 1;

    display: grid;

    grid-template-columns:120px 1fr;

    overflow: hidden;

}

/*==========================================================
    Parent
==========================================================*/

.category-parent {

    overflow-y: auto;

    background: var(--surface);

    border-left: 1px solid var(--border);

}

.category-parent-item{

    display:flex;
    align-items:center;
    justify-content:flex-start;

    width:100%;
    height:58px;

    padding:0 16px;

    border-bottom:1px solid var(--border);

    color:var(--text);
    text-decoration:none;

}

.category-parent-item:hover {

    background: var(--surface-alt);

}

.category-parent-item.active {

    background: var(--primary-soft);

    color: var(--primary);

    font-weight: 700;

}

.category-empty{
    display:none;
    height:100%;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:var(--muted);
    gap:12px;
}

.category-empty.active{
    display:flex;
}

.category-empty i{
    font-size:42px;
    opacity:.4;
}

.category-empty p{
    font-size:14px;
}
/*==========================================================
            Child
        ==========================================================*/

.category-child {

    position: relative;

    overflow: hidden;

    background: var(--background);

}

.category-item {

    width: 100%;

    height: 58px;

    display: none;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    border: none;

    border-bottom: 1px solid var(--border);

    background: none;

    color: var(--text);

    cursor: pointer;

}
/*.category-item{

    display:none;

}*/

.category-item.active{

    display:flex;

}

.category-back{

    display:none;
    align-items:center;
    gap:10px;

    height:58px;

    padding:0 16px;

    border-bottom:1px solid var(--border);

    background:var(--surface);

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

}

.category-back.show{

    display:flex;

}

.category-back:hover{

    background:var(--primary-soft);

}

.category-back i{

    font-size:12px;

}
/*==========================================================
    Scroll
==========================================================*/

.category-parent::-webkit-scrollbar,
.category-child::-webkit-scrollbar {

    width: 5px;

}

.category-parent::-webkit-scrollbar-thumb,
.category-child::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 20px;

}

.category-level{
    display:none;
}

.category-level.active{
    display:block;
}