.studio-main-navigation {
    width: 288px;
    height: calc(100% - 15px);
    background: var(--theme-main-navigation-bg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 35px;
    padding-top: 15px;

    &-container {
        width: 100%;
    }

    &-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        &-title {
            display: flex;
            align-items: center;
            width: 100%;

            .studio-logo {
                display: flex;

                &-circle {
                    width: 22px;
                    height: 22px;
                    background-color: var(--theme-logo-circle-bg);
                    border-radius: 11px;
                }

                &-square {
                    width: 18px;
                    height: 18px;
                    background-color: var(--theme-logo-square-bg);
                    border-radius: 2px;
                    position: relative;
                    left: -8px;
                    top: 2px;
                    transform: rotate(45deg);
                }
            }

            &-text {
                color: var(
                    --theme-main-navigation-header-title-text
                );
                font-size: 16px;
                line-height: 22px;
                margin-left: 12px;

                @media only screen and (max-width: 865px) {
                    font-size: 11px;
                    margin-left: 0;
                }
            }

            @media only screen and (max-width: 865px) {
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column-reverse;
            }
        }

        &-controls {
            display: flex;
            align-items: center;
            padding: 5px;
            width: 40%;
            justify-content: space-around;

            adf-notification-history {
                button {
                    &:hover {
                        background-color: var(
                            --theme-main-navigation-header-controls-icon-hover
                        );
                    }
                    &:active {
                        background-color: var(
                            --theme-main-navigation-header-controls-icon-pressed
                        );
                    }
                }
                .mat-icon {
                    color: var(
                        --theme-main-navigation-header-controls-icon
                    );
                }
                .mat-badge-content {
                    background: var(
                        --theme-main-navigation-header-controls-badge
                    );
                }
            }
        }
    }

    &-section {
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    &-main-title {
        color: var(--theme-main-navigation-main-title);
        font-family: var(--theme-font-family);
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        display: flex;
        align-items: center;
        letter-spacing: 0.2px;
        text-transform: capitalize;
    }

    &-menu {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        list-style-type: none;
        width: 100%;

        &-element {
            color: var(--theme-main-navigation-menu-element);
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 24px;
            display: flex;
            align-items: center;
            letter-spacing: 0.25px;
            width: 100%;

            .mat-icon-button {
                display: inherit;
                align-items: center;
            }

            &-button {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            &-active {
                color: var(
                    --theme-main-navigation-menu-element-active
                );
            }
        }
    }

    @media only screen and (max-width: 865px) {
        width: 195px;
        padding-left: 15px;
    }
}
