:host {
    display: flex;
    flex-direction: column;

    .categories-container {
        display: flex;
        flex-direction: column;

        .category {
            border: 1px solid blue;

            &:hover {
                cursor: pointer;
            }

            .category-header {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: .5em 1em;

                mat-icon {
                    transition: transform .2s ease-in-out;
                }
            }

            &.openned {
                .category-header {
                    mat-icon {
                        transform: rotate(90deg);
                    }
                }

                .sub-category-container {
                    max-height: none;
                }
            }

            .sub-category-container {
                border: 1px solid red;
                overflow: hidden;
                max-height: 0;
                transition: max-height .2s ease-in-out;
    
                .sub-category {
                    padding: .5em 1em .5em 2em;
                }
            }
        }
    }
}