/**
 * VTX Product Sidebar
 *
 * Version:
 * 1.0
 *
 * Responsibility:
 * - Product Category Sidebar Component
 * - Category Tree Styling
 * - Accordion Interaction Styling
 *
 * Does NOT:
 * - Control page layout
 * - Control grid columns
 * - Control product content area
 *
 */


/* =====================================================
   Sidebar Container
===================================================== */

.vtx-product-sidebar {

    border-right: 1px solid var(--vtx-border);

    padding-right:24px;

}



/* =====================================================
   Sidebar Heading
===================================================== */

.vtx-product-sidebar__title {

    margin: 0 0 24px;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;

    color: var(--theme-palette-color-4);

}



/* =====================================================
   List Reset
===================================================== */

.vtx-product-sidebar__list,
.vtx-product-sidebar__children {

    list-style: none;

    margin: 0;

    padding: 0;

}



/* =====================================================
   Item
===================================================== */

.vtx-product-sidebar__item {

    margin: 0;

}



/* =====================================================
   Row
===================================================== */

.vtx-product-sidebar__row {

    display: flex;

    align-items: center;

}



/* =====================================================
   Toggle Button
===================================================== */

.vtx-product-sidebar__toggle {

    width: 16px;

    height: 16px;

    padding: 0;

    margin-right: 8px;

    border: 0;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: var(--theme-palette-color-5);

}

.vtx-product-sidebar__item.is-active
> .vtx-product-sidebar__row
.vtx-product-sidebar__toggle {

    color:var(--theme-palette-color-4);

}



.vtx-product-sidebar__toggle:hover {

    background: transparent;

}



/*
 Placeholder:

 Keeps text alignment consistent
 for categories without children
 */

.vtx-product-sidebar__toggle-placeholder {

    width: 16px;

    height: 16px;

    margin-right: 8px;

}



/* =====================================================
   Chevron Icon
===================================================== */

.vtx-product-sidebar__icon {

    width: 7px;

    height: 7px;

    border-right: 1.5px solid currentColor;

    border-bottom: 1.5px solid currentColor;

    transform: rotate(-45deg);

    transition:

        transform .2s ease;

}



/*
 Open State

 Right arrow
 ->
 Down arrow
 */

.vtx-product-sidebar__item.is-open
.vtx-product-sidebar__icon {

    transform: rotate(45deg);

}



/* =====================================================
   Category Link
===================================================== */

.vtx-product-sidebar__link {

    flex: 1;

    display: block;

    padding: 5px 0;

    font-size: 14px;

    line-height: 1.5;

    color: var(--theme-palette-color-5);

    text-decoration: none;

}



.vtx-product-sidebar__link:hover {

    color: var(--theme-palette-color-1);

}



/* =====================================================
   Active Category
===================================================== */

.vtx-product-sidebar__item.is-active
> .vtx-product-sidebar__row
.vtx-product-sidebar__link {

    color: var(--theme-palette-color-4);

    font-weight: 600;

}



/* =====================================================
   Children Tree
===================================================== */

.vtx-product-sidebar__children {

    margin-left: 20px;

    display: none;

}

.vtx-product-sidebar__children
.vtx-product-sidebar__link {

    font-size:13px;

}



/*
 Expanded Category
 */

.vtx-product-sidebar__item.is-open
> .vtx-product-sidebar__children {

    display: block;

}



/*
 Deeper Levels

 Supports:
 Level 3
 Level 4
 ...
 */

.vtx-product-sidebar__children
.vtx-product-sidebar__children {

    margin-left: 16px;

}



/* =====================================================
   Responsive
===================================================== */


/*
 Tablet

 Layout is already handled by:

 .vtx-product-explorer-layout

 Here only handle sidebar appearance.
 */

@media (max-width:999px) {


    .vtx-product-sidebar {

        border-right: none;

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

        padding-bottom:24px;

    }


}



/*
 Mobile
 */

@media (max-width:767px) {


    .vtx-product-sidebar {

        padding-bottom:20px;

    }



    .vtx-product-sidebar__title {

        margin-bottom:16px;

    }


}