/* QnA - basic */
@import "../functions";
@import "../variables";
@import "../custom";
@import "../maps";
@import "../mixins";
@import "../utilities";

.category-wrap {

    .list-group {
        background-color: $white;
    }

    .list-group-item {
        border: none;
        text-align: left;
        width: 200px;
        align-items: stretch;
        height: 40px;

        a {
            color: var(--bs-gray-dark);
            font-family: 'Noto Sans KR', sans-serif;
            font-size: .875rem;
            font-weight: 400;
        }

        &:hover {
            background-color: rgba($color: $info, $alpha: .25);
        }
    }

    .list-group.depth1 {
        z-index: 101;
        display: none;
        align-self: stretch;
        align-content: stretch !important;
    }

    .list-group.depth2 {
        z-index: 102;
        display: none;
        top: 0;
        right: -195px;
        align-self: stretch;
        align-content: stretch !important;
    }

    .list-group.depth3 {
        z-index: 103;
        display: none;
        top: 0;
        right: -195px;
        align-self: stretch;
        align-content: stretch !important;
    }

    .list-group-item.bottoms {
        .list-group.depth2 {
            //top: -200px !important;
        }
    }

    .categorys {
        &:hover {
            .list-group.depth1 {
                display: flex;

                .list-group-item {
                    &:hover {
                        .list-group.depth2 {
                            display: flex;

                            .list-group-item {
                                &:hover {
                                    .list-group.depth3 {
                                        display: flex;

                                    }
                                }
                            }

                        }
                    }
                }
            }
        }
    }
}

//모바일 영카트 분류메뉴
.mobile-shop-category-wrap {
    font-size: .875rem;

    a,
    button {
        font-size: .875rem;
    }

    .accordion-button {
        width: 40px;
        padding: .75rem;
    }

    .mobile-depth2 {
        background-color: $gray-100;
    }

    .sub-cate.accordion-item {
        background-color: transparent !important;
        border: none;
        margin-left: 1rem;

        .accordion-button {
            background-color: transparent !important;

        }

        .mobile-depth3 {
            margin-left: 2rem;
        }
    }

    .accordion-header {
        min-height: 44px;
    }
}