kkt-menu  {

    .menu-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-host {
        position: relative;
        &.mobile {
            &.active {
                .menu-container {
                    top: 48px;
                    position: fixed;
                    display: block;
                }
            }
            .menu-container {
                display: none;
                overflow-y: scroll;
            }
        }
    }

    .menu-topbar {
        min-height: 48px;
        border-bottom: 1px solid #f0f1f3;
        align-items: center;
        justify-content: space-between;
        display: none;
        padding: 0 10px;
        ion-icon {
            font-size: 24px;
        }
        &.visible {
            display: flex;
        }
    }

    /*
        ## Device = Most SmartPhones (Portrait)
        ## Screen C/w to 479px
    */
    @media (max-width: 480px), (max-height: 400px) {

        .menu-topbar {
            display: flex;
        }

        .menu-container {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            z-index: 1;
            width: 100%;
            height: 100%;
            flex-direction: column;

            kkt-menu-item {
                width: 100%;
                padding: 20px;
                &:not(:last-child) {
                    border-bottom: 1px solid #f0f1f3;
                }
                .menu-item {
                    width: 100%;
                }
            }

            kkt-menu-dropdown {
                width: 100%;
                position: initial;
                transform: translate(-0, 0);
                kkt-menu-item {
                    padding: 20px;
                    border-left: 0;
                    &:first-child {
                        border-top: 1px solid #f0f1f3;
                        margin-top: 10px;
                    }
                }
            }
        }
    }

}