@import "variables.css";

.topbar {
    & .user-dropdown {
        & .dropdown_content {
            & .dropdown_content-link {
                &:hover {
                    background-color: var(--disabled-background);
                }
            }
        }

        &.open {
            & .dropdown_content {
                display: grid !important;
            }
        }
    }
}

.sidebar {
    & .navigation {
        & .navigation_link {
            &.active {
                font-weight: var(--font-weight-6) !important;
                color: var(--secondary-color-500) !important;
                font-size: var(--size-fixed-175) !important;
            }

            &:hover {
                color: var(--secondary-color-500) !important;
            }
        }
        & .active {
            & .navigation_link {
                color: var(--secondary-color-500) !important;
                background-color: var(--disabled-background);
                font-weight: var(--font-weight-6) !important;
                font-size: var(--size-fixed-175) !important;
            }
        }
        & .navigation_link--with_children {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            cursor: pointer !important;
        }

    }
}
.arrow svg {
    display: flex;
}

.dropdown {
    &.open {
        & .navigation_link--with_children {
            font-weight: var(--font-weight-6);
            color: var(--secondary-color-500);
            background-color: var(--disabled-background);
        }

        & .navigation_children {
            max-height: 250px !important;
            margin-top: 6px;
            pointer-events: all !important;
        }
    }
}

.dropdown {
    cursor: pointer;
    &.open {
        & .arrow {
            transform: rotate(180deg);
        }
    }
}