.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 42px;
    width: 42px;
    border-radius: 4px;
    gap: 3px;
    background-color: var(--nav-item-top) !important;
    &:hover {
        background-color: var(--nav-item-hover) !important;
        .burger_line{
            background: var(--header);
        }
    }
    &_line {
        width: 15px;
        height: 2px;
        background: var(--text);
        border-radius: 4px;
        position: relative;
        right: 0;
        transition: right var(--transition);
    }

    &.active {
        .burger_line:nth-of-type(2) {
            right: -4px;
        }
    }
}
